
<!doctype html>
<html lang="en" class="no-js">
  <head>
    
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width,initial-scale=1">
      
      
      
      
        <link rel="prev" href="../01_Html%E5%9F%BA%E7%A1%80/index.html">
      
      
        <link rel="next" href="../03_Javascript%E5%9F%BA%E7%A1%80/index.html">
      
      
      <link rel="icon" href="../assets/images/favicon.png">
      <meta name="generator" content="mkdocs-1.6.1, mkdocs-material-9.6.5">
    
    
      
        <title>3 CSS基础实验 - 基于WEB的应用程序开发-实验指导书</title>
      
    
    
      <link rel="stylesheet" href="../assets/stylesheets/main.8608ea7d.min.css">
      
        
        <link rel="stylesheet" href="../assets/stylesheets/palette.06af60db.min.css">
      
      


    
    
      
    
    
      
        
        
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,700,700i%7CRoboto+Mono:400,400i,700,700i&display=fallback">
        <style>:root{--md-text-font:"Roboto";--md-code-font:"Roboto Mono"}</style>
      
    
    
      <link rel="stylesheet" href="../assets/stylesheets/extra.css">
    
    <script>__md_scope=new URL("..",location),__md_hash=e=>[...e].reduce(((e,_)=>(e<<5)-e+_.charCodeAt(0)),0),__md_get=(e,_=localStorage,t=__md_scope)=>JSON.parse(_.getItem(t.pathname+"."+e)),__md_set=(e,_,t=localStorage,a=__md_scope)=>{try{t.setItem(a.pathname+"."+e,JSON.stringify(_))}catch(e){}}</script>
    
      

    
    
    
  </head>
  
  
    
    
      
    
    
    
    
    <body dir="ltr" data-md-color-scheme="default" data-md-color-primary="purple" data-md-color-accent="indigo">
  
    
    <input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
    <input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
    <label class="md-overlay" for="__drawer"></label>
    <div data-md-component="skip">
      
        
        <a href="#css" class="md-skip">
          Skip to content
        </a>
      
    </div>
    <div data-md-component="announce">
      
    </div>
    
    
      

  

<header class="md-header md-header--shadow" data-md-component="header">
  <nav class="md-header__inner md-grid" aria-label="Header">
    <a href="../index.html" title="基于WEB的应用程序开发-实验指导书" class="md-header__button md-logo" aria-label="基于WEB的应用程序开发-实验指导书" data-md-component="logo">
      
  
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 8a3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3m0 3.54C9.64 9.35 6.5 8 3 8v11c3.5 0 6.64 1.35 9 3.54 2.36-2.19 5.5-3.54 9-3.54V8c-3.5 0-6.64 1.35-9 3.54"/></svg>

    </a>
    <label class="md-header__button md-icon" for="__drawer">
      
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"/></svg>
    </label>
    <div class="md-header__title" data-md-component="header-title">
      <div class="md-header__ellipsis">
        <div class="md-header__topic">
          <span class="md-ellipsis">
            基于WEB的应用程序开发-实验指导书
          </span>
        </div>
        <div class="md-header__topic" data-md-component="header-topic">
          <span class="md-ellipsis">
            
              3 CSS基础实验
            
          </span>
        </div>
      </div>
    </div>
    
      
        <form class="md-header__option" data-md-component="palette">
  
    
    
    
    <input class="md-option" data-md-color-media="" data-md-color-scheme="default" data-md-color-primary="purple" data-md-color-accent="indigo"  aria-label="夜间模式"  type="radio" name="__palette" id="__palette_0">
    
      <label class="md-header__button md-icon" title="夜间模式" for="__palette_1" hidden>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 7a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3m0-7 2.39 3.42C13.65 5.15 12.84 5 12 5s-1.65.15-2.39.42zM3.34 7l4.16-.35A7.2 7.2 0 0 0 5.94 8.5c-.44.74-.69 1.5-.83 2.29zm.02 10 1.76-3.77a7.131 7.131 0 0 0 2.38 4.14zM20.65 7l-1.77 3.79a7.02 7.02 0 0 0-2.38-4.15zm-.01 10-4.14.36c.59-.51 1.12-1.14 1.54-1.86.42-.73.69-1.5.83-2.29zM12 22l-2.41-3.44c.74.27 1.55.44 2.41.44.82 0 1.63-.17 2.37-.44z"/></svg>
      </label>
    
  
    
    
    
    <input class="md-option" data-md-color-media="" data-md-color-scheme="slate" data-md-color-primary="teal" data-md-color-accent="indigo"  aria-label="日间模式"  type="radio" name="__palette" id="__palette_1">
    
      <label class="md-header__button md-icon" title="日间模式" for="__palette_0" hidden>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m17.75 4.09-2.53 1.94.91 3.06-2.63-1.81-2.63 1.81.91-3.06-2.53-1.94L12.44 4l1.06-3 1.06 3zm3.5 6.91-1.64 1.25.59 1.98-1.7-1.17-1.7 1.17.59-1.98L15.75 11l2.06-.05L18.5 9l.69 1.95zm-2.28 4.95c.83-.08 1.72 1.1 1.19 1.85-.32.45-.66.87-1.08 1.27C15.17 23 8.84 23 4.94 19.07c-3.91-3.9-3.91-10.24 0-14.14.4-.4.82-.76 1.27-1.08.75-.53 1.93.36 1.85 1.19-.27 2.86.69 5.83 2.89 8.02a9.96 9.96 0 0 0 8.02 2.89m-1.64 2.02a12.08 12.08 0 0 1-7.8-3.47c-2.17-2.19-3.33-5-3.49-7.82-2.81 3.14-2.7 7.96.31 10.98 3.02 3.01 7.84 3.12 10.98.31"/></svg>
      </label>
    
  
</form>
      
    
    
      <script>var palette=__md_get("__palette");if(palette&&palette.color){if("(prefers-color-scheme)"===palette.color.media){var media=matchMedia("(prefers-color-scheme: light)"),input=document.querySelector(media.matches?"[data-md-color-media='(prefers-color-scheme: light)']":"[data-md-color-media='(prefers-color-scheme: dark)']");palette.color.media=input.getAttribute("data-md-color-media"),palette.color.scheme=input.getAttribute("data-md-color-scheme"),palette.color.primary=input.getAttribute("data-md-color-primary"),palette.color.accent=input.getAttribute("data-md-color-accent")}for(var[key,value]of Object.entries(palette.color))document.body.setAttribute("data-md-color-"+key,value)}</script>
    
    
    
    
  </nav>
  
</header>
    
    <div class="md-container" data-md-component="container">
      
      
        
          
        
      
      <main class="md-main" data-md-component="main">
        <div class="md-main__inner md-grid">
          
            
              
              <div class="md-sidebar md-sidebar--primary" data-md-component="sidebar" data-md-type="navigation" >
                <div class="md-sidebar__scrollwrap">
                  <div class="md-sidebar__inner">
                    



<nav class="md-nav md-nav--primary" aria-label="Navigation" data-md-level="0">
  <label class="md-nav__title" for="__drawer">
    <a href="../index.html" title="基于WEB的应用程序开发-实验指导书" class="md-nav__button md-logo" aria-label="基于WEB的应用程序开发-实验指导书" data-md-component="logo">
      
  
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 8a3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3m0 3.54C9.64 9.35 6.5 8 3 8v11c3.5 0 6.64 1.35 9 3.54 2.36-2.19 5.5-3.54 9-3.54V8c-3.5 0-6.64 1.35-9 3.54"/></svg>

    </a>
    基于WEB的应用程序开发-实验指导书
  </label>
  
  <ul class="md-nav__list" data-md-scrollfix>
    
      
      
  
  
  
  
    <li class="md-nav__item">
      <a href="../index.html" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    首页
    
  </span>
  

      </a>
    </li>
  

    
      
      
  
  
  
  
    
    
    
      
        
        
      
    
    
    <li class="md-nav__item md-nav__item--section md-nav__item--nested">
      
        
        
          
        
        <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type="checkbox" id="__nav_2" >
        
          
          <label class="md-nav__link" for="__nav_2" id="__nav_2_label" tabindex="">
            
  
  <span class="md-ellipsis">
    1. 实验环境搭建
    
  </span>
  

            <span class="md-nav__icon md-icon"></span>
          </label>
        
        <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_2_label" aria-expanded="false">
          <label class="md-nav__title" for="__nav_2">
            <span class="md-nav__icon md-icon"></span>
            1. 实验环境搭建
          </label>
          <ul class="md-nav__list" data-md-scrollfix>
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../00_%E7%8E%AF%E5%A2%83%E5%BB%BA%E7%AB%8B/Java/index.html" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    1.1 前端环境搭建
    
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../Java/05_%E6%9C%8D%E5%8A%A1%E7%AB%AF%E5%BC%80%E5%8F%91%E7%8E%AF%E5%A2%83%E6%90%AD%E5%BB%BA/index.html" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    1.2 后端境搭建
    
  </span>
  

      </a>
    </li>
  

              
            
          </ul>
        </nav>
      
    </li>
  

    
      
      
  
  
  
  
    <li class="md-nav__item">
      <a href="../01_Html%E5%9F%BA%E7%A1%80/index.html" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    2 Html基础实验
    
  </span>
  

      </a>
    </li>
  

    
      
      
  
  
    
  
  
  
    <li class="md-nav__item md-nav__item--active">
      
      <input class="md-nav__toggle md-toggle" type="checkbox" id="__toc">
      
      
        
      
      
        <label class="md-nav__link md-nav__link--active" for="__toc">
          
  
  <span class="md-ellipsis">
    3 CSS基础实验
    
  </span>
  

          <span class="md-nav__icon md-icon"></span>
        </label>
      
      <a href="index.html" class="md-nav__link md-nav__link--active">
        
  
  <span class="md-ellipsis">
    3 CSS基础实验
    
  </span>
  

      </a>
      
        

  

<nav class="md-nav md-nav--secondary" aria-label=" ">
  
  
  
    
  
  
    <label class="md-nav__title" for="__toc">
      <span class="md-nav__icon md-icon"></span>
       
    </label>
    <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
      
        <li class="md-nav__item">
  <a href="#1" class="md-nav__link">
    <span class="md-ellipsis">
      1 实验类型
    </span>
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#2" class="md-nav__link">
    <span class="md-ellipsis">
      2 实验目的
    </span>
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#3" class="md-nav__link">
    <span class="md-ellipsis">
      3 实验要求
    </span>
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#4" class="md-nav__link">
    <span class="md-ellipsis">
      4 实验环境
    </span>
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#5" class="md-nav__link">
    <span class="md-ellipsis">
      5 实验步骤
    </span>
  </a>
  
    <nav class="md-nav" aria-label="5 实验步骤">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#_1" class="md-nav__link">
    <span class="md-ellipsis">
      基础语法
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_2" class="md-nav__link">
    <span class="md-ellipsis">
      常见属性
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_3" class="md-nav__link">
    <span class="md-ellipsis">
      文字排版
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_4" class="md-nav__link">
    <span class="md-ellipsis">
      综合
    </span>
  </a>
  
    <nav class="md-nav" aria-label="综合">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#_5" class="md-nav__link">
    <span class="md-ellipsis">
      导航菜单
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_6" class="md-nav__link">
    <span class="md-ellipsis">
      对话框
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_7" class="md-nav__link">
    <span class="md-ellipsis">
      表单与表格
    </span>
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_8" class="md-nav__link">
    <span class="md-ellipsis">
      拓展练习
    </span>
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
    </ul>
  
</nav>
      
    </li>
  

    
      
      
  
  
  
  
    <li class="md-nav__item">
      <a href="../03_Javascript%E5%9F%BA%E7%A1%80/index.html" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    04 Javascript基础
    
  </span>
  

      </a>
    </li>
  

    
      
      
  
  
  
  
    <li class="md-nav__item">
      <a href="../03_Javascript%E9%AB%98%E7%BA%A7%E5%AE%9E%E9%AA%8C/index.html" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    05 Javascript高级实验
    
  </span>
  

      </a>
    </li>
  

    
      
      
  
  
  
  
    <li class="md-nav__item">
      <a href="../04_jQuery/index.html" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    06 jQuery
    
  </span>
  

      </a>
    </li>
  

    
      
      
  
  
  
  
    <li class="md-nav__item">
      <a href="../04_Bootstrap/index.html" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    06 Bootstrap
    
  </span>
  

      </a>
    </li>
  

    
      
      
  
  
  
  
    <li class="md-nav__item">
      <a href="../04_Vue.js%E5%9F%BA%E7%A1%80/index.html" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    06 Vue.js
    
  </span>
  

      </a>
    </li>
  

    
      
      
  
  
  
  
    <li class="md-nav__item">
      <a href="../Java/05_JSP%E7%9A%84%E9%9A%90%E5%90%AB%E5%AF%B9%E8%B1%A1%E5%AE%9E%E9%AA%8C/index.html" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    05 JSP的隐含对象实验
    
  </span>
  

      </a>
    </li>
  

    
      
      
  
  
  
  
    <li class="md-nav__item">
      <a href="../Java/06_Servlet%E5%8F%8AFilter%E5%9F%BA%E7%A1%80%E5%AE%9E%E9%AA%8C/index.html" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    06 Servlet及Filter基础实验
    
  </span>
  

      </a>
    </li>
  

    
      
      
  
  
  
  
    <li class="md-nav__item">
      <a href="../Java/07_SpringBoot%E7%BB%BC%E5%90%88%E5%AE%9E%E9%AA%8C/index.html" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    07 Spring Boot综合实验
    
  </span>
  

      </a>
    </li>
  

    
  </ul>
</nav>
                  </div>
                </div>
              </div>
            
            
              
              <div class="md-sidebar md-sidebar--secondary" data-md-component="sidebar" data-md-type="toc" >
                <div class="md-sidebar__scrollwrap">
                  <div class="md-sidebar__inner">
                    

  

<nav class="md-nav md-nav--secondary" aria-label=" ">
  
  
  
    
  
  
    <label class="md-nav__title" for="__toc">
      <span class="md-nav__icon md-icon"></span>
       
    </label>
    <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
      
        <li class="md-nav__item">
  <a href="#1" class="md-nav__link">
    <span class="md-ellipsis">
      1 实验类型
    </span>
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#2" class="md-nav__link">
    <span class="md-ellipsis">
      2 实验目的
    </span>
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#3" class="md-nav__link">
    <span class="md-ellipsis">
      3 实验要求
    </span>
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#4" class="md-nav__link">
    <span class="md-ellipsis">
      4 实验环境
    </span>
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#5" class="md-nav__link">
    <span class="md-ellipsis">
      5 实验步骤
    </span>
  </a>
  
    <nav class="md-nav" aria-label="5 实验步骤">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#_1" class="md-nav__link">
    <span class="md-ellipsis">
      基础语法
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_2" class="md-nav__link">
    <span class="md-ellipsis">
      常见属性
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_3" class="md-nav__link">
    <span class="md-ellipsis">
      文字排版
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_4" class="md-nav__link">
    <span class="md-ellipsis">
      综合
    </span>
  </a>
  
    <nav class="md-nav" aria-label="综合">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#_5" class="md-nav__link">
    <span class="md-ellipsis">
      导航菜单
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_6" class="md-nav__link">
    <span class="md-ellipsis">
      对话框
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_7" class="md-nav__link">
    <span class="md-ellipsis">
      表单与表格
    </span>
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_8" class="md-nav__link">
    <span class="md-ellipsis">
      拓展练习
    </span>
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
    </ul>
  
</nav>
                  </div>
                </div>
              </div>
            
          
          
            <div class="md-content" data-md-component="content">
              <article class="md-content__inner md-typeset">
                
                  



<h1 id="css">CSS基础实验</h1>
<h2 id="1">1 实验类型</h2>
<p>验证型，2学时，必选实验</p>
<h2 id="2">2 实验目的</h2>
<p>学习CSS语法和常见属性；掌握如何使用CSS控制网页元素的样式；实践练习，提高CSS样式设计能力</p>
<h2 id="3">3 实验要求</h2>
<p>验证参考代码；修改参考代码，实现自己的设计；将关键结果截图及源代码整理成实验报告</p>
<h2 id="4">4 实验环境</h2>
<p>Windows7、浏览器（推荐使用<code>Chrome/Microsoft Edge/Firefox</code>等）、Visual Studio Code(VS Code)</p>
<h2 id="5">5 实验步骤</h2>
<blockquote>
<p>工作目录：<code>C:/{学号}/exp3</code>， 后续文件均存放在工作目录</p>
</blockquote>
<h3 id="_1">基础语法</h3>
<p>使用不同方式编写CSS样式规则对页面进行修饰，步骤如下：</p>
<ol>
<li>
<p>使用VSCode创建文件<code>css_gramma_1.html</code>，使用<strong>内部CSS</strong>修饰网页元素，尝试修改页面背景颜色，参考代码如下：
    <div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">gramma/css_gramma_1.html</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-0-1"> 1</a></span>
<span class="normal"><a href="#__codelineno-0-2"> 2</a></span>
<span class="normal"><a href="#__codelineno-0-3"> 3</a></span>
<span class="normal"><a href="#__codelineno-0-4"> 4</a></span>
<span class="normal"><a href="#__codelineno-0-5"> 5</a></span>
<span class="normal"><a href="#__codelineno-0-6"> 6</a></span>
<span class="normal"><a href="#__codelineno-0-7"> 7</a></span>
<span class="normal"><a href="#__codelineno-0-8"> 8</a></span>
<span class="normal"><a href="#__codelineno-0-9"> 9</a></span>
<span class="normal"><a href="#__codelineno-0-10">10</a></span>
<span class="normal"><a href="#__codelineno-0-11">11</a></span>
<span class="normal"><a href="#__codelineno-0-12">12</a></span>
<span class="normal"><a href="#__codelineno-0-13">13</a></span>
<span class="normal"><a href="#__codelineno-0-14">14</a></span>
<span class="normal"><a href="#__codelineno-0-15">15</a></span>
<span class="normal"><a href="#__codelineno-0-16">16</a></span>
<span class="normal"><a href="#__codelineno-0-17">17</a></span>
<span class="normal"><a href="#__codelineno-0-18">18</a></span>
<span class="normal"><a href="#__codelineno-0-19">19</a></span>
<span class="normal"><a href="#__codelineno-0-20">20</a></span>
<span class="normal"><a href="#__codelineno-0-21">21</a></span>
<span class="normal"><a href="#__codelineno-0-22">22</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-0-1" name="__codelineno-0-1"></a><span class="cp">&lt;!DOCTYPE html&gt;</span>
<a id="__codelineno-0-2" name="__codelineno-0-2"></a><span class="p">&lt;</span><span class="nt">html</span><span class="p">&gt;</span>
<a id="__codelineno-0-3" name="__codelineno-0-3"></a>
<a id="__codelineno-0-4" name="__codelineno-0-4"></a><span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
<a id="__codelineno-0-5" name="__codelineno-0-5"></a>  <span class="p">&lt;</span><span class="nt">style</span><span class="p">&gt;</span>
<a id="__codelineno-0-6" name="__codelineno-0-6"></a><span class="w">    </span><span class="nt">body</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-0-7" name="__codelineno-0-7"></a><span class="w">      </span><span class="k">background-color</span><span class="p">:</span><span class="w"> </span><span class="kc">linen</span><span class="p">;</span>
<a id="__codelineno-0-8" name="__codelineno-0-8"></a><span class="w">    </span><span class="p">}</span>
<a id="__codelineno-0-9" name="__codelineno-0-9"></a>
<a id="__codelineno-0-10" name="__codelineno-0-10"></a><span class="w">    </span><span class="nt">h1</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-0-11" name="__codelineno-0-11"></a><span class="w">      </span><span class="k">color</span><span class="p">:</span><span class="w"> </span><span class="kc">maroon</span><span class="p">;</span>
<a id="__codelineno-0-12" name="__codelineno-0-12"></a><span class="w">      </span><span class="k">margin-left</span><span class="p">:</span><span class="w"> </span><span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<a id="__codelineno-0-13" name="__codelineno-0-13"></a><span class="w">    </span><span class="p">}</span>
<a id="__codelineno-0-14" name="__codelineno-0-14"></a><span class="w">  </span><span class="p">&lt;/</span><span class="nt">style</span><span class="p">&gt;</span>
<a id="__codelineno-0-15" name="__codelineno-0-15"></a><span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
<a id="__codelineno-0-16" name="__codelineno-0-16"></a>
<a id="__codelineno-0-17" name="__codelineno-0-17"></a><span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
<a id="__codelineno-0-18" name="__codelineno-0-18"></a>  <span class="p">&lt;</span><span class="nt">h1</span><span class="p">&gt;</span>这是一个标题<span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span>
<a id="__codelineno-0-19" name="__codelineno-0-19"></a>  <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>这是一个段落。<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<a id="__codelineno-0-20" name="__codelineno-0-20"></a><span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<a id="__codelineno-0-21" name="__codelineno-0-21"></a>
<a id="__codelineno-0-22" name="__codelineno-0-22"></a><span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</code></pre></div></td></tr></table></div></p>
</li>
<li>
<p>在上一步页面的基础上将样式规则改为外部引用方式，将样式规则提取到独立的<code>css_gramma_2.css</code>，修改链接方式后另存为<code>css_gramma_2.html</code>，参考代码如下：</p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">gramma/css_gramma_2.css</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-1-1">1</a></span>
<span class="normal"><a href="#__codelineno-1-2">2</a></span>
<span class="normal"><a href="#__codelineno-1-3">3</a></span>
<span class="normal"><a href="#__codelineno-1-4">4</a></span>
<span class="normal"><a href="#__codelineno-1-5">5</a></span>
<span class="normal"><a href="#__codelineno-1-6">6</a></span>
<span class="normal"><a href="#__codelineno-1-7">7</a></span>
<span class="normal"><a href="#__codelineno-1-8">8</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-1-1" name="__codelineno-1-1"></a><span class="nt">body</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-1-2" name="__codelineno-1-2"></a><span class="w">  </span><span class="k">background-color</span><span class="p">:</span><span class="w"> </span><span class="kc">linen</span><span class="p">;</span>
<a id="__codelineno-1-3" name="__codelineno-1-3"></a><span class="p">}</span>
<a id="__codelineno-1-4" name="__codelineno-1-4"></a>
<a id="__codelineno-1-5" name="__codelineno-1-5"></a><span class="nt">h1</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-1-6" name="__codelineno-1-6"></a><span class="w">  </span><span class="k">color</span><span class="p">:</span><span class="w"> </span><span class="kc">maroon</span><span class="p">;</span>
<a id="__codelineno-1-7" name="__codelineno-1-7"></a><span class="w">  </span><span class="k">margin-left</span><span class="p">:</span><span class="w"> </span><span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<a id="__codelineno-1-8" name="__codelineno-1-8"></a><span class="p">}</span>
</code></pre></div></td></tr></table></div>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">gramma/css_gramma_2.html</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-2-1"> 1</a></span>
<span class="normal"><a href="#__codelineno-2-2"> 2</a></span>
<span class="normal"><a href="#__codelineno-2-3"> 3</a></span>
<span class="normal"><a href="#__codelineno-2-4"> 4</a></span>
<span class="normal"><a href="#__codelineno-2-5"> 5</a></span>
<span class="normal"><a href="#__codelineno-2-6"> 6</a></span>
<span class="normal"><a href="#__codelineno-2-7"> 7</a></span>
<span class="normal"><a href="#__codelineno-2-8"> 8</a></span>
<span class="normal"><a href="#__codelineno-2-9"> 9</a></span>
<span class="normal"><a href="#__codelineno-2-10">10</a></span>
<span class="normal"><a href="#__codelineno-2-11">11</a></span>
<span class="normal"><a href="#__codelineno-2-12">12</a></span>
<span class="normal"><a href="#__codelineno-2-13">13</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-2-1" name="__codelineno-2-1"></a><span class="cp">&lt;!DOCTYPE html&gt;</span>
<a id="__codelineno-2-2" name="__codelineno-2-2"></a><span class="p">&lt;</span><span class="nt">html</span><span class="p">&gt;</span>
<a id="__codelineno-2-3" name="__codelineno-2-3"></a>
<a id="__codelineno-2-4" name="__codelineno-2-4"></a><span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
<a id="__codelineno-2-5" name="__codelineno-2-5"></a>  <span class="p">&lt;</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;stylesheet&quot;</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;2.css&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-2-6" name="__codelineno-2-6"></a><span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
<a id="__codelineno-2-7" name="__codelineno-2-7"></a>
<a id="__codelineno-2-8" name="__codelineno-2-8"></a><span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
<a id="__codelineno-2-9" name="__codelineno-2-9"></a>  <span class="p">&lt;</span><span class="nt">h1</span><span class="p">&gt;</span>这是一个标题<span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span>
<a id="__codelineno-2-10" name="__codelineno-2-10"></a>  <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>这是一个段落。<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<a id="__codelineno-2-11" name="__codelineno-2-11"></a><span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<a id="__codelineno-2-12" name="__codelineno-2-12"></a>
<a id="__codelineno-2-13" name="__codelineno-2-13"></a><span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</code></pre></div></td></tr></table></div>
</li>
</ol>
<h3 id="_2">常见属性</h3>
<p>使用<strong>盒模型</strong>中的<code>padding</code>,<code>margin</code>等常见属性对<code>&lt;div&gt;</code>标签进行修饰</p>
<ol>
<li>
<p>创建<code>css_common_1.html</code>文件，编写CSS代码修饰<code>div</code>元素<strong>理解CSS盒模型</strong>，修改背景颜色、宽度、边框宽度、内容边框间距等属性，参考代码如下：</p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">common/css_common_1.html</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-3-1"> 1</a></span>
<span class="normal"><a href="#__codelineno-3-2"> 2</a></span>
<span class="normal"><a href="#__codelineno-3-3"> 3</a></span>
<span class="normal"><a href="#__codelineno-3-4"> 4</a></span>
<span class="normal"><a href="#__codelineno-3-5"> 5</a></span>
<span class="normal"><a href="#__codelineno-3-6"> 6</a></span>
<span class="normal"><a href="#__codelineno-3-7"> 7</a></span>
<span class="normal"><a href="#__codelineno-3-8"> 8</a></span>
<span class="normal"><a href="#__codelineno-3-9"> 9</a></span>
<span class="normal"><a href="#__codelineno-3-10">10</a></span>
<span class="normal"><a href="#__codelineno-3-11">11</a></span>
<span class="normal"><a href="#__codelineno-3-12">12</a></span>
<span class="normal"><a href="#__codelineno-3-13">13</a></span>
<span class="normal"><a href="#__codelineno-3-14">14</a></span>
<span class="normal"><a href="#__codelineno-3-15">15</a></span>
<span class="normal"><a href="#__codelineno-3-16">16</a></span>
<span class="normal"><a href="#__codelineno-3-17">17</a></span>
<span class="normal"><a href="#__codelineno-3-18">18</a></span>
<span class="normal"><a href="#__codelineno-3-19">19</a></span>
<span class="normal"><a href="#__codelineno-3-20">20</a></span>
<span class="normal"><a href="#__codelineno-3-21">21</a></span>
<span class="normal"><a href="#__codelineno-3-22">22</a></span>
<span class="normal"><a href="#__codelineno-3-23">23</a></span>
<span class="normal"><a href="#__codelineno-3-24">24</a></span>
<span class="normal"><a href="#__codelineno-3-25">25</a></span>
<span class="normal"><a href="#__codelineno-3-26">26</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-3-1" name="__codelineno-3-1"></a><span class="cp">&lt;!DOCTYPE html&gt;</span>
<a id="__codelineno-3-2" name="__codelineno-3-2"></a><span class="p">&lt;</span><span class="nt">html</span><span class="p">&gt;</span>
<a id="__codelineno-3-3" name="__codelineno-3-3"></a>
<a id="__codelineno-3-4" name="__codelineno-3-4"></a><span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
<a id="__codelineno-3-5" name="__codelineno-3-5"></a>  <span class="p">&lt;</span><span class="nt">style</span><span class="p">&gt;</span>
<a id="__codelineno-3-6" name="__codelineno-3-6"></a><span class="w">    </span><span class="nt">div</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-3-7" name="__codelineno-3-7"></a><span class="w">      </span><span class="k">background-color</span><span class="p">:</span><span class="w"> </span><span class="kc">lightgrey</span><span class="p">;</span>
<a id="__codelineno-3-8" name="__codelineno-3-8"></a><span class="w">      </span><span class="k">width</span><span class="p">:</span><span class="w"> </span><span class="mi">300</span><span class="kt">px</span><span class="p">;</span>
<a id="__codelineno-3-9" name="__codelineno-3-9"></a><span class="w">      </span><span class="k">border</span><span class="p">:</span><span class="w"> </span><span class="mi">15</span><span class="kt">px</span><span class="w"> </span><span class="kc">solid</span><span class="w"> </span><span class="kc">green</span><span class="p">;</span>
<a id="__codelineno-3-10" name="__codelineno-3-10"></a><span class="w">      </span><span class="k">padding</span><span class="p">:</span><span class="w"> </span><span class="mi">30</span><span class="kt">px</span><span class="p">;</span>
<a id="__codelineno-3-11" name="__codelineno-3-11"></a><span class="w">      </span><span class="k">margin</span><span class="p">:</span><span class="w"> </span><span class="mi">10</span><span class="kt">px</span><span class="p">;</span>
<a id="__codelineno-3-12" name="__codelineno-3-12"></a><span class="w">    </span><span class="p">}</span>
<a id="__codelineno-3-13" name="__codelineno-3-13"></a><span class="w">  </span><span class="p">&lt;/</span><span class="nt">style</span><span class="p">&gt;</span>
<a id="__codelineno-3-14" name="__codelineno-3-14"></a><span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
<a id="__codelineno-3-15" name="__codelineno-3-15"></a>
<a id="__codelineno-3-16" name="__codelineno-3-16"></a><span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
<a id="__codelineno-3-17" name="__codelineno-3-17"></a>  <span class="p">&lt;</span><span class="nt">h1</span><span class="p">&gt;</span>演示<span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span>
<a id="__codelineno-3-18" name="__codelineno-3-18"></a>  <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>CSS 盒模型（框模型）实质上是一个包装每个 HTML 元素的盒子。它包括：边
<a id="__codelineno-3-19" name="__codelineno-3-19"></a>    框、内边距（填充）、外边距以及实际的内容。<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<a id="__codelineno-3-20" name="__codelineno-3-20"></a>  <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span>此文本是盒子里的内容。我们添加了 50px 的内边距，20px 的外边距和 15px
<a id="__codelineno-3-21" name="__codelineno-3-21"></a>    的绿色边框。此文本是盒子里的内容。此文本是盒子里的内容。此文本是盒子里的
<a id="__codelineno-3-22" name="__codelineno-3-22"></a>    内容。此文本是盒子里的内容。此文本是盒子里的内容。此文本是盒子里的内容。
<a id="__codelineno-3-23" name="__codelineno-3-23"></a>  <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<a id="__codelineno-3-24" name="__codelineno-3-24"></a><span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<a id="__codelineno-3-25" name="__codelineno-3-25"></a>
<a id="__codelineno-3-26" name="__codelineno-3-26"></a><span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</code></pre></div></td></tr></table></div>
</li>
<li>
<p>创建<code>css_common_2.html</code>文件，使用CSS创建<strong>带边框的超链接</strong>，尝试改度不同状态下超链接的外观，参考代码如下：</p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">common/css_common_2.html</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-4-1"> 1</a></span>
<span class="normal"><a href="#__codelineno-4-2"> 2</a></span>
<span class="normal"><a href="#__codelineno-4-3"> 3</a></span>
<span class="normal"><a href="#__codelineno-4-4"> 4</a></span>
<span class="normal"><a href="#__codelineno-4-5"> 5</a></span>
<span class="normal"><a href="#__codelineno-4-6"> 6</a></span>
<span class="normal"><a href="#__codelineno-4-7"> 7</a></span>
<span class="normal"><a href="#__codelineno-4-8"> 8</a></span>
<span class="normal"><a href="#__codelineno-4-9"> 9</a></span>
<span class="normal"><a href="#__codelineno-4-10">10</a></span>
<span class="normal"><a href="#__codelineno-4-11">11</a></span>
<span class="normal"><a href="#__codelineno-4-12">12</a></span>
<span class="normal"><a href="#__codelineno-4-13">13</a></span>
<span class="normal"><a href="#__codelineno-4-14">14</a></span>
<span class="normal"><a href="#__codelineno-4-15">15</a></span>
<span class="normal"><a href="#__codelineno-4-16">16</a></span>
<span class="normal"><a href="#__codelineno-4-17">17</a></span>
<span class="normal"><a href="#__codelineno-4-18">18</a></span>
<span class="normal"><a href="#__codelineno-4-19">19</a></span>
<span class="normal"><a href="#__codelineno-4-20">20</a></span>
<span class="normal"><a href="#__codelineno-4-21">21</a></span>
<span class="normal"><a href="#__codelineno-4-22">22</a></span>
<span class="normal"><a href="#__codelineno-4-23">23</a></span>
<span class="normal"><a href="#__codelineno-4-24">24</a></span>
<span class="normal"><a href="#__codelineno-4-25">25</a></span>
<span class="normal"><a href="#__codelineno-4-26">26</a></span>
<span class="normal"><a href="#__codelineno-4-27">27</a></span>
<span class="normal"><a href="#__codelineno-4-28">28</a></span>
<span class="normal"><a href="#__codelineno-4-29">29</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-4-1" name="__codelineno-4-1"></a><span class="cp">&lt;!DOCTYPE html&gt;</span>
<a id="__codelineno-4-2" name="__codelineno-4-2"></a><span class="p">&lt;</span><span class="nt">html</span><span class="p">&gt;</span>
<a id="__codelineno-4-3" name="__codelineno-4-3"></a>
<a id="__codelineno-4-4" name="__codelineno-4-4"></a><span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
<a id="__codelineno-4-5" name="__codelineno-4-5"></a>  <span class="p">&lt;</span><span class="nt">style</span><span class="p">&gt;</span>
<a id="__codelineno-4-6" name="__codelineno-4-6"></a><span class="w">    </span><span class="nt">a</span><span class="p">:</span><span class="nd">link</span><span class="o">,</span>
<a id="__codelineno-4-7" name="__codelineno-4-7"></a><span class="w">    </span><span class="nt">a</span><span class="p">:</span><span class="nd">visited</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-4-8" name="__codelineno-4-8"></a><span class="w">      </span><span class="k">background-color</span><span class="p">:</span><span class="w"> </span><span class="kc">white</span><span class="p">;</span>
<a id="__codelineno-4-9" name="__codelineno-4-9"></a><span class="w">      </span><span class="k">color</span><span class="p">:</span><span class="w"> </span><span class="kc">black</span><span class="p">;</span>
<a id="__codelineno-4-10" name="__codelineno-4-10"></a><span class="w">      </span><span class="k">border</span><span class="p">:</span><span class="w"> </span><span class="mi">2</span><span class="kt">px</span><span class="w"> </span><span class="kc">solid</span><span class="w"> </span><span class="kc">green</span><span class="p">;</span>
<a id="__codelineno-4-11" name="__codelineno-4-11"></a><span class="w">      </span><span class="k">padding</span><span class="p">:</span><span class="w"> </span><span class="mi">10</span><span class="kt">px</span><span class="w"> </span><span class="mi">20</span><span class="kt">px</span><span class="p">;</span>
<a id="__codelineno-4-12" name="__codelineno-4-12"></a><span class="w">      </span><span class="k">text-align</span><span class="p">:</span><span class="w"> </span><span class="kc">center</span><span class="p">;</span>
<a id="__codelineno-4-13" name="__codelineno-4-13"></a><span class="w">      </span><span class="k">text-decoration</span><span class="p">:</span><span class="w"> </span><span class="kc">none</span><span class="p">;</span>
<a id="__codelineno-4-14" name="__codelineno-4-14"></a><span class="w">      </span><span class="k">display</span><span class="p">:</span><span class="w"> </span><span class="kc">inline-block</span><span class="p">;</span>
<a id="__codelineno-4-15" name="__codelineno-4-15"></a><span class="w">    </span><span class="p">}</span>
<a id="__codelineno-4-16" name="__codelineno-4-16"></a>
<a id="__codelineno-4-17" name="__codelineno-4-17"></a><span class="w">    </span><span class="nt">a</span><span class="p">:</span><span class="nd">hover</span><span class="o">,</span>
<a id="__codelineno-4-18" name="__codelineno-4-18"></a><span class="w">    </span><span class="nt">a</span><span class="p">:</span><span class="nd">active</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-4-19" name="__codelineno-4-19"></a><span class="w">      </span><span class="k">background-color</span><span class="p">:</span><span class="w"> </span><span class="kc">green</span><span class="p">;</span>
<a id="__codelineno-4-20" name="__codelineno-4-20"></a><span class="w">      </span><span class="k">color</span><span class="p">:</span><span class="w"> </span><span class="kc">white</span><span class="p">;</span>
<a id="__codelineno-4-21" name="__codelineno-4-21"></a><span class="w">    </span><span class="p">}</span>
<a id="__codelineno-4-22" name="__codelineno-4-22"></a><span class="w">  </span><span class="p">&lt;/</span><span class="nt">style</span><span class="p">&gt;</span>
<a id="__codelineno-4-23" name="__codelineno-4-23"></a><span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
<a id="__codelineno-4-24" name="__codelineno-4-24"></a>
<a id="__codelineno-4-25" name="__codelineno-4-25"></a><span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
<a id="__codelineno-4-26" name="__codelineno-4-26"></a>  <span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;javascript:alert(&#39;Are you OK?&#39;);&quot;</span><span class="p">&gt;</span>点我<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>
<a id="__codelineno-4-27" name="__codelineno-4-27"></a><span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<a id="__codelineno-4-28" name="__codelineno-4-28"></a>
<a id="__codelineno-4-29" name="__codelineno-4-29"></a><span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</code></pre></div></td></tr></table></div>
</li>
<li>
<p>创建<code>css_common_3.html</code>，用CSS美化<code>table</code>，使用ID选择器定义外观并修改常见外观属性，示例代码如下：</p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">common/css_common_3.html</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-5-1"> 1</a></span>
<span class="normal"><a href="#__codelineno-5-2"> 2</a></span>
<span class="normal"><a href="#__codelineno-5-3"> 3</a></span>
<span class="normal"><a href="#__codelineno-5-4"> 4</a></span>
<span class="normal"><a href="#__codelineno-5-5"> 5</a></span>
<span class="normal"><a href="#__codelineno-5-6"> 6</a></span>
<span class="normal"><a href="#__codelineno-5-7"> 7</a></span>
<span class="normal"><a href="#__codelineno-5-8"> 8</a></span>
<span class="normal"><a href="#__codelineno-5-9"> 9</a></span>
<span class="normal"><a href="#__codelineno-5-10">10</a></span>
<span class="normal"><a href="#__codelineno-5-11">11</a></span>
<span class="normal"><a href="#__codelineno-5-12">12</a></span>
<span class="normal"><a href="#__codelineno-5-13">13</a></span>
<span class="normal"><a href="#__codelineno-5-14">14</a></span>
<span class="normal"><a href="#__codelineno-5-15">15</a></span>
<span class="normal"><a href="#__codelineno-5-16">16</a></span>
<span class="normal"><a href="#__codelineno-5-17">17</a></span>
<span class="normal"><a href="#__codelineno-5-18">18</a></span>
<span class="normal"><a href="#__codelineno-5-19">19</a></span>
<span class="normal"><a href="#__codelineno-5-20">20</a></span>
<span class="normal"><a href="#__codelineno-5-21">21</a></span>
<span class="normal"><a href="#__codelineno-5-22">22</a></span>
<span class="normal"><a href="#__codelineno-5-23">23</a></span>
<span class="normal"><a href="#__codelineno-5-24">24</a></span>
<span class="normal"><a href="#__codelineno-5-25">25</a></span>
<span class="normal"><a href="#__codelineno-5-26">26</a></span>
<span class="normal"><a href="#__codelineno-5-27">27</a></span>
<span class="normal"><a href="#__codelineno-5-28">28</a></span>
<span class="normal"><a href="#__codelineno-5-29">29</a></span>
<span class="normal"><a href="#__codelineno-5-30">30</a></span>
<span class="normal"><a href="#__codelineno-5-31">31</a></span>
<span class="normal"><a href="#__codelineno-5-32">32</a></span>
<span class="normal"><a href="#__codelineno-5-33">33</a></span>
<span class="normal"><a href="#__codelineno-5-34">34</a></span>
<span class="normal"><a href="#__codelineno-5-35">35</a></span>
<span class="normal"><a href="#__codelineno-5-36">36</a></span>
<span class="normal"><a href="#__codelineno-5-37">37</a></span>
<span class="normal"><a href="#__codelineno-5-38">38</a></span>
<span class="normal"><a href="#__codelineno-5-39">39</a></span>
<span class="normal"><a href="#__codelineno-5-40">40</a></span>
<span class="normal"><a href="#__codelineno-5-41">41</a></span>
<span class="normal"><a href="#__codelineno-5-42">42</a></span>
<span class="normal"><a href="#__codelineno-5-43">43</a></span>
<span class="normal"><a href="#__codelineno-5-44">44</a></span>
<span class="normal"><a href="#__codelineno-5-45">45</a></span>
<span class="normal"><a href="#__codelineno-5-46">46</a></span>
<span class="normal"><a href="#__codelineno-5-47">47</a></span>
<span class="normal"><a href="#__codelineno-5-48">48</a></span>
<span class="normal"><a href="#__codelineno-5-49">49</a></span>
<span class="normal"><a href="#__codelineno-5-50">50</a></span>
<span class="normal"><a href="#__codelineno-5-51">51</a></span>
<span class="normal"><a href="#__codelineno-5-52">52</a></span>
<span class="normal"><a href="#__codelineno-5-53">53</a></span>
<span class="normal"><a href="#__codelineno-5-54">54</a></span>
<span class="normal"><a href="#__codelineno-5-55">55</a></span>
<span class="normal"><a href="#__codelineno-5-56">56</a></span>
<span class="normal"><a href="#__codelineno-5-57">57</a></span>
<span class="normal"><a href="#__codelineno-5-58">58</a></span>
<span class="normal"><a href="#__codelineno-5-59">59</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-5-1" name="__codelineno-5-1"></a><span class="cp">&lt;!DOCTYPE html&gt;</span>
<a id="__codelineno-5-2" name="__codelineno-5-2"></a><span class="p">&lt;</span><span class="nt">html</span><span class="p">&gt;</span>
<a id="__codelineno-5-3" name="__codelineno-5-3"></a>
<a id="__codelineno-5-4" name="__codelineno-5-4"></a><span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
<a id="__codelineno-5-5" name="__codelineno-5-5"></a>  <span class="p">&lt;</span><span class="nt">style</span><span class="p">&gt;</span>
<a id="__codelineno-5-6" name="__codelineno-5-6"></a><span class="w">    </span><span class="p">#</span><span class="nn">customers</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-5-7" name="__codelineno-5-7"></a><span class="w">      </span><span class="k">font-family</span><span class="p">:</span><span class="w"> </span><span class="n">Arial</span><span class="p">,</span><span class="w"> </span><span class="n">Helvetica</span><span class="p">,</span><span class="w"> </span><span class="kc">sans-serif</span><span class="p">;</span>
<a id="__codelineno-5-8" name="__codelineno-5-8"></a><span class="w">      </span><span class="k">border-collapse</span><span class="p">:</span><span class="w"> </span><span class="kc">collapse</span><span class="p">;</span>
<a id="__codelineno-5-9" name="__codelineno-5-9"></a><span class="w">      </span><span class="k">width</span><span class="p">:</span><span class="w"> </span><span class="mi">100</span><span class="kt">%</span><span class="p">;</span>
<a id="__codelineno-5-10" name="__codelineno-5-10"></a><span class="w">    </span><span class="p">}</span>
<a id="__codelineno-5-11" name="__codelineno-5-11"></a>
<a id="__codelineno-5-12" name="__codelineno-5-12"></a><span class="w">    </span><span class="p">#</span><span class="nn">customers</span><span class="w"> </span><span class="nt">td</span><span class="o">,</span>
<a id="__codelineno-5-13" name="__codelineno-5-13"></a><span class="w">    </span><span class="p">#</span><span class="nn">customers</span><span class="w"> </span><span class="nt">th</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-5-14" name="__codelineno-5-14"></a><span class="w">      </span><span class="k">border</span><span class="p">:</span><span class="w"> </span><span class="mi">1</span><span class="kt">px</span><span class="w"> </span><span class="kc">solid</span><span class="w"> </span><span class="mh">#ddd</span><span class="p">;</span>
<a id="__codelineno-5-15" name="__codelineno-5-15"></a><span class="w">      </span><span class="k">padding</span><span class="p">:</span><span class="w"> </span><span class="mi">8</span><span class="kt">px</span><span class="p">;</span>
<a id="__codelineno-5-16" name="__codelineno-5-16"></a><span class="w">    </span><span class="p">}</span>
<a id="__codelineno-5-17" name="__codelineno-5-17"></a>
<a id="__codelineno-5-18" name="__codelineno-5-18"></a><span class="w">    </span><span class="p">#</span><span class="nn">customers</span><span class="w"> </span><span class="nt">tr</span><span class="p">:</span><span class="nd">nth-child</span><span class="o">(</span><span class="nt">even</span><span class="o">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-5-19" name="__codelineno-5-19"></a><span class="w">      </span><span class="k">background-color</span><span class="p">:</span><span class="w"> </span><span class="mh">#f2f2f2</span><span class="p">;</span>
<a id="__codelineno-5-20" name="__codelineno-5-20"></a><span class="w">    </span><span class="p">}</span>
<a id="__codelineno-5-21" name="__codelineno-5-21"></a>
<a id="__codelineno-5-22" name="__codelineno-5-22"></a><span class="w">    </span><span class="p">#</span><span class="nn">customers</span><span class="w"> </span><span class="nt">tr</span><span class="p">:</span><span class="nd">hover</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-5-23" name="__codelineno-5-23"></a><span class="w">      </span><span class="k">background-color</span><span class="p">:</span><span class="w"> </span><span class="mh">#ddd</span><span class="p">;</span>
<a id="__codelineno-5-24" name="__codelineno-5-24"></a><span class="w">    </span><span class="p">}</span>
<a id="__codelineno-5-25" name="__codelineno-5-25"></a>
<a id="__codelineno-5-26" name="__codelineno-5-26"></a><span class="w">    </span><span class="p">#</span><span class="nn">customers</span><span class="w"> </span><span class="nt">th</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-5-27" name="__codelineno-5-27"></a><span class="w">      </span><span class="k">padding-top</span><span class="p">:</span><span class="w"> </span><span class="mi">12</span><span class="kt">px</span><span class="p">;</span>
<a id="__codelineno-5-28" name="__codelineno-5-28"></a><span class="w">      </span><span class="k">padding-bottom</span><span class="p">:</span><span class="w"> </span><span class="mi">12</span><span class="kt">px</span><span class="p">;</span>
<a id="__codelineno-5-29" name="__codelineno-5-29"></a><span class="w">      </span><span class="k">text-align</span><span class="p">:</span><span class="w"> </span><span class="kc">left</span><span class="p">;</span>
<a id="__codelineno-5-30" name="__codelineno-5-30"></a><span class="w">      </span><span class="k">background-color</span><span class="p">:</span><span class="w"> </span><span class="mh">#4CAF50</span><span class="p">;</span>
<a id="__codelineno-5-31" name="__codelineno-5-31"></a><span class="w">      </span><span class="k">color</span><span class="p">:</span><span class="w"> </span><span class="kc">white</span><span class="p">;</span>
<a id="__codelineno-5-32" name="__codelineno-5-32"></a><span class="w">    </span><span class="p">}</span>
<a id="__codelineno-5-33" name="__codelineno-5-33"></a><span class="w">  </span><span class="p">&lt;/</span><span class="nt">style</span><span class="p">&gt;</span>
<a id="__codelineno-5-34" name="__codelineno-5-34"></a><span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
<a id="__codelineno-5-35" name="__codelineno-5-35"></a>
<a id="__codelineno-5-36" name="__codelineno-5-36"></a><span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
<a id="__codelineno-5-37" name="__codelineno-5-37"></a>  <span class="p">&lt;</span><span class="nt">table</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;customers&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-5-38" name="__codelineno-5-38"></a>    <span class="p">&lt;</span><span class="nt">tr</span><span class="p">&gt;</span>
<a id="__codelineno-5-39" name="__codelineno-5-39"></a>      <span class="p">&lt;</span><span class="nt">th</span><span class="p">&gt;</span>Company<span class="p">&lt;/</span><span class="nt">th</span><span class="p">&gt;</span>
<a id="__codelineno-5-40" name="__codelineno-5-40"></a>      <span class="p">&lt;</span><span class="nt">th</span><span class="p">&gt;</span>Contact<span class="p">&lt;/</span><span class="nt">th</span><span class="p">&gt;</span>
<a id="__codelineno-5-41" name="__codelineno-5-41"></a>      <span class="p">&lt;</span><span class="nt">th</span><span class="p">&gt;</span>Address<span class="p">&lt;/</span><span class="nt">th</span><span class="p">&gt;</span>
<a id="__codelineno-5-42" name="__codelineno-5-42"></a>      <span class="p">&lt;</span><span class="nt">th</span><span class="p">&gt;</span>City<span class="p">&lt;/</span><span class="nt">th</span><span class="p">&gt;</span>
<a id="__codelineno-5-43" name="__codelineno-5-43"></a>    <span class="p">&lt;/</span><span class="nt">tr</span><span class="p">&gt;</span>
<a id="__codelineno-5-44" name="__codelineno-5-44"></a>    <span class="p">&lt;</span><span class="nt">tr</span><span class="p">&gt;</span>
<a id="__codelineno-5-45" name="__codelineno-5-45"></a>      <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>Alibaba<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<a id="__codelineno-5-46" name="__codelineno-5-46"></a>      <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>Ma Yun<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<a id="__codelineno-5-47" name="__codelineno-5-47"></a>      <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>No. 699, Wangshang Road, Binjiang District<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<a id="__codelineno-5-48" name="__codelineno-5-48"></a>      <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>Hangzhou<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<a id="__codelineno-5-49" name="__codelineno-5-49"></a>    <span class="p">&lt;/</span><span class="nt">tr</span><span class="p">&gt;</span>
<a id="__codelineno-5-50" name="__codelineno-5-50"></a>    <span class="p">&lt;</span><span class="nt">tr</span><span class="p">&gt;</span>
<a id="__codelineno-5-51" name="__codelineno-5-51"></a>      <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>APPLE<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<a id="__codelineno-5-52" name="__codelineno-5-52"></a>      <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>Tim Cook<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<a id="__codelineno-5-53" name="__codelineno-5-53"></a>      <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>1 Infinite Loop Cupertino, CA 95014<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<a id="__codelineno-5-54" name="__codelineno-5-54"></a>      <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>Cupertino<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<a id="__codelineno-5-55" name="__codelineno-5-55"></a>    <span class="p">&lt;/</span><span class="nt">tr</span><span class="p">&gt;</span>
<a id="__codelineno-5-56" name="__codelineno-5-56"></a>  <span class="p">&lt;/</span><span class="nt">table</span><span class="p">&gt;</span>
<a id="__codelineno-5-57" name="__codelineno-5-57"></a><span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<a id="__codelineno-5-58" name="__codelineno-5-58"></a>
<a id="__codelineno-5-59" name="__codelineno-5-59"></a><span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</code></pre></div></td></tr></table></div>
</li>
</ol>
<h3 id="_3">文字排版</h3>
<p><strong>选择一首小诗或小短文</strong>，使用<code>标题</code>，<code>段落</code>，<code>链接</code>，<code>列表</code>等标签对文字进行排版，并使用<code>字体</code>，<code>颜色</code>，<code>大小</code>，<code>对齐</code>等样式属性对版面进行美化。以下为排版的参考代码：</p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">word/css_word_1.html</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-6-1"> 1</a></span>
<span class="normal"><a href="#__codelineno-6-2"> 2</a></span>
<span class="normal"><a href="#__codelineno-6-3"> 3</a></span>
<span class="normal"><a href="#__codelineno-6-4"> 4</a></span>
<span class="normal"><a href="#__codelineno-6-5"> 5</a></span>
<span class="normal"><a href="#__codelineno-6-6"> 6</a></span>
<span class="normal"><a href="#__codelineno-6-7"> 7</a></span>
<span class="normal"><a href="#__codelineno-6-8"> 8</a></span>
<span class="normal"><a href="#__codelineno-6-9"> 9</a></span>
<span class="normal"><a href="#__codelineno-6-10">10</a></span>
<span class="normal"><a href="#__codelineno-6-11">11</a></span>
<span class="normal"><a href="#__codelineno-6-12">12</a></span>
<span class="normal"><a href="#__codelineno-6-13">13</a></span>
<span class="normal"><a href="#__codelineno-6-14">14</a></span>
<span class="normal"><a href="#__codelineno-6-15">15</a></span>
<span class="normal"><a href="#__codelineno-6-16">16</a></span>
<span class="normal"><a href="#__codelineno-6-17">17</a></span>
<span class="normal"><a href="#__codelineno-6-18">18</a></span>
<span class="normal"><a href="#__codelineno-6-19">19</a></span>
<span class="normal"><a href="#__codelineno-6-20">20</a></span>
<span class="normal"><a href="#__codelineno-6-21">21</a></span>
<span class="normal"><a href="#__codelineno-6-22">22</a></span>
<span class="normal"><a href="#__codelineno-6-23">23</a></span>
<span class="normal"><a href="#__codelineno-6-24">24</a></span>
<span class="normal"><a href="#__codelineno-6-25">25</a></span>
<span class="normal"><a href="#__codelineno-6-26">26</a></span>
<span class="normal"><a href="#__codelineno-6-27">27</a></span>
<span class="normal"><a href="#__codelineno-6-28">28</a></span>
<span class="normal"><a href="#__codelineno-6-29">29</a></span>
<span class="normal"><a href="#__codelineno-6-30">30</a></span>
<span class="normal"><a href="#__codelineno-6-31">31</a></span>
<span class="normal"><a href="#__codelineno-6-32">32</a></span>
<span class="normal"><a href="#__codelineno-6-33">33</a></span>
<span class="normal"><a href="#__codelineno-6-34">34</a></span>
<span class="normal"><a href="#__codelineno-6-35">35</a></span>
<span class="normal"><a href="#__codelineno-6-36">36</a></span>
<span class="normal"><a href="#__codelineno-6-37">37</a></span>
<span class="normal"><a href="#__codelineno-6-38">38</a></span>
<span class="normal"><a href="#__codelineno-6-39">39</a></span>
<span class="normal"><a href="#__codelineno-6-40">40</a></span>
<span class="normal"><a href="#__codelineno-6-41">41</a></span>
<span class="normal"><a href="#__codelineno-6-42">42</a></span>
<span class="normal"><a href="#__codelineno-6-43">43</a></span>
<span class="normal"><a href="#__codelineno-6-44">44</a></span>
<span class="normal"><a href="#__codelineno-6-45">45</a></span>
<span class="normal"><a href="#__codelineno-6-46">46</a></span>
<span class="normal"><a href="#__codelineno-6-47">47</a></span>
<span class="normal"><a href="#__codelineno-6-48">48</a></span>
<span class="normal"><a href="#__codelineno-6-49">49</a></span>
<span class="normal"><a href="#__codelineno-6-50">50</a></span>
<span class="normal"><a href="#__codelineno-6-51">51</a></span>
<span class="normal"><a href="#__codelineno-6-52">52</a></span>
<span class="normal"><a href="#__codelineno-6-53">53</a></span>
<span class="normal"><a href="#__codelineno-6-54">54</a></span>
<span class="normal"><a href="#__codelineno-6-55">55</a></span>
<span class="normal"><a href="#__codelineno-6-56">56</a></span>
<span class="normal"><a href="#__codelineno-6-57">57</a></span>
<span class="normal"><a href="#__codelineno-6-58">58</a></span>
<span class="normal"><a href="#__codelineno-6-59">59</a></span>
<span class="normal"><a href="#__codelineno-6-60">60</a></span>
<span class="normal"><a href="#__codelineno-6-61">61</a></span>
<span class="normal"><a href="#__codelineno-6-62">62</a></span>
<span class="normal"><a href="#__codelineno-6-63">63</a></span>
<span class="normal"><a href="#__codelineno-6-64">64</a></span>
<span class="normal"><a href="#__codelineno-6-65">65</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-6-1" name="__codelineno-6-1"></a><span class="p">&lt;</span><span class="nt">HTML</span><span class="p">&gt;</span>
<a id="__codelineno-6-2" name="__codelineno-6-2"></a>
<a id="__codelineno-6-3" name="__codelineno-6-3"></a><span class="p">&lt;</span><span class="nt">HEAD</span><span class="p">&gt;</span>
<a id="__codelineno-6-4" name="__codelineno-6-4"></a>  <span class="p">&lt;</span><span class="nt">META</span> <span class="na">http-equiv</span><span class="o">=</span><span class="s">&quot;Content-Type&quot;</span> <span class="na">content</span><span class="o">=</span><span class="s">&quot;text/html; charset=utf-8&quot;</span> <span class="p">/&gt;</span>
<a id="__codelineno-6-5" name="__codelineno-6-5"></a>  <span class="p">&lt;</span><span class="nt">TITLE</span><span class="p">&gt;</span>排版<span class="p">&lt;/</span><span class="nt">TITLE</span><span class="p">&gt;</span>
<a id="__codelineno-6-6" name="__codelineno-6-6"></a>  <span class="p">&lt;</span><span class="nt">style</span><span class="p">&gt;</span>
<a id="__codelineno-6-7" name="__codelineno-6-7"></a><span class="w">    </span><span class="nt">P</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-6-8" name="__codelineno-6-8"></a><span class="w">      </span><span class="k">font-family</span><span class="p">:</span><span class="w"> </span><span class="n">LiSu</span><span class="p">;</span>
<a id="__codelineno-6-9" name="__codelineno-6-9"></a><span class="w">      </span><span class="k">font-size</span><span class="p">:</span><span class="w"> </span><span class="mi">18</span><span class="kt">px</span><span class="p">;</span>
<a id="__codelineno-6-10" name="__codelineno-6-10"></a><span class="w">      </span><span class="k">color</span><span class="p">:</span><span class="w"> </span><span class="kc">black</span><span class="p">;</span>
<a id="__codelineno-6-11" name="__codelineno-6-11"></a><span class="w">      </span><span class="k">text-align</span><span class="p">:</span><span class="w"> </span><span class="kc">center</span><span class="p">;</span>
<a id="__codelineno-6-12" name="__codelineno-6-12"></a><span class="w">    </span><span class="p">}</span>
<a id="__codelineno-6-13" name="__codelineno-6-13"></a>
<a id="__codelineno-6-14" name="__codelineno-6-14"></a><span class="w">    </span><span class="nt">H2</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-6-15" name="__codelineno-6-15"></a><span class="w">      </span><span class="k">background-color</span><span class="p">:</span><span class="w"> </span><span class="nb">rgb</span><span class="p">(</span><span class="mi">245</span><span class="p">,</span><span class="w"> </span><span class="mi">245</span><span class="p">,</span><span class="w"> </span><span class="mi">245</span><span class="p">);</span>
<a id="__codelineno-6-16" name="__codelineno-6-16"></a><span class="w">      </span><span class="k">text-align</span><span class="p">:</span><span class="w"> </span><span class="kc">center</span><span class="p">;</span>
<a id="__codelineno-6-17" name="__codelineno-6-17"></a><span class="w">    </span><span class="p">}</span>
<a id="__codelineno-6-18" name="__codelineno-6-18"></a>
<a id="__codelineno-6-19" name="__codelineno-6-19"></a><span class="w">    </span><span class="p">.</span><span class="nc">author</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-6-20" name="__codelineno-6-20"></a><span class="w">      </span><span class="k">font-family</span><span class="p">:</span><span class="w"> </span><span class="n">SimSun</span><span class="p">;</span>
<a id="__codelineno-6-21" name="__codelineno-6-21"></a><span class="w">      </span><span class="k">font-size</span><span class="p">:</span><span class="w"> </span><span class="mi">12</span><span class="kt">px</span><span class="p">;</span>
<a id="__codelineno-6-22" name="__codelineno-6-22"></a><span class="w">      </span><span class="k">color</span><span class="p">:</span><span class="w"> </span><span class="nb">rgb</span><span class="p">(</span><span class="mi">139</span><span class="p">,</span><span class="w"> </span><span class="mi">0</span><span class="p">,</span><span class="w"> </span><span class="mi">0</span><span class="p">);</span>
<a id="__codelineno-6-23" name="__codelineno-6-23"></a><span class="w">      </span><span class="k">text-align</span><span class="p">:</span><span class="w"> </span><span class="kc">center</span><span class="p">;</span>
<a id="__codelineno-6-24" name="__codelineno-6-24"></a><span class="w">    </span><span class="p">}</span>
<a id="__codelineno-6-25" name="__codelineno-6-25"></a>
<a id="__codelineno-6-26" name="__codelineno-6-26"></a><span class="w">    </span><span class="p">.</span><span class="nc">word</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-6-27" name="__codelineno-6-27"></a><span class="w">      </span><span class="k">color</span><span class="p">:</span><span class="w"> </span><span class="kc">gray</span><span class="p">;</span>
<a id="__codelineno-6-28" name="__codelineno-6-28"></a><span class="w">    </span><span class="p">}</span>
<a id="__codelineno-6-29" name="__codelineno-6-29"></a>
<a id="__codelineno-6-30" name="__codelineno-6-30"></a><span class="w">    </span><span class="p">.</span><span class="nc">detail</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-6-31" name="__codelineno-6-31"></a><span class="w">      </span><span class="k">color</span><span class="p">:</span><span class="w"> </span><span class="kc">gray</span><span class="p">;</span>
<a id="__codelineno-6-32" name="__codelineno-6-32"></a><span class="w">    </span><span class="p">}</span>
<a id="__codelineno-6-33" name="__codelineno-6-33"></a>
<a id="__codelineno-6-34" name="__codelineno-6-34"></a><span class="w">    </span><span class="nt">A</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-6-35" name="__codelineno-6-35"></a><span class="w">      </span><span class="k">text-decoration</span><span class="p">:</span><span class="w"> </span><span class="kc">none</span><span class="p">;</span>
<a id="__codelineno-6-36" name="__codelineno-6-36"></a><span class="w">    </span><span class="p">}</span>
<a id="__codelineno-6-37" name="__codelineno-6-37"></a>
<a id="__codelineno-6-38" name="__codelineno-6-38"></a><span class="w">    </span><span class="nt">A</span><span class="p">:</span><span class="nd">visited</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-6-39" name="__codelineno-6-39"></a><span class="w">      </span><span class="k">text-decoration</span><span class="p">:</span><span class="w"> </span><span class="kc">none</span><span class="p">;</span>
<a id="__codelineno-6-40" name="__codelineno-6-40"></a><span class="w">    </span><span class="p">}</span>
<a id="__codelineno-6-41" name="__codelineno-6-41"></a>
<a id="__codelineno-6-42" name="__codelineno-6-42"></a><span class="w">    </span><span class="nt">A</span><span class="p">:</span><span class="nd">hover</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-6-43" name="__codelineno-6-43"></a><span class="w">      </span><span class="k">text-decoration</span><span class="p">:</span><span class="w"> </span><span class="kc">underline</span><span class="p">;</span>
<a id="__codelineno-6-44" name="__codelineno-6-44"></a><span class="w">    </span><span class="p">}</span>
<a id="__codelineno-6-45" name="__codelineno-6-45"></a><span class="w">  </span><span class="p">&lt;/</span><span class="nt">style</span><span class="p">&gt;</span>
<a id="__codelineno-6-46" name="__codelineno-6-46"></a><span class="p">&lt;/</span><span class="nt">HEAD</span><span class="p">&gt;</span>
<a id="__codelineno-6-47" name="__codelineno-6-47"></a>
<a id="__codelineno-6-48" name="__codelineno-6-48"></a><span class="p">&lt;</span><span class="nt">BODY</span><span class="p">&gt;</span>
<a id="__codelineno-6-49" name="__codelineno-6-49"></a>  <span class="p">&lt;</span><span class="nt">H2</span><span class="p">&gt;</span>出塞<span class="p">&lt;/</span><span class="nt">H2</span><span class="p">&gt;</span>
<a id="__codelineno-6-50" name="__codelineno-6-50"></a>  <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;author&quot;</span><span class="p">&gt;</span>作者：<span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;#a2&quot;</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;word&quot;</span><span class="p">&gt;</span>王昌龄<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<a id="__codelineno-6-51" name="__codelineno-6-51"></a>  <span class="p">&lt;</span><span class="nt">P</span><span class="p">&gt;</span>秦时明月汉时关，<span class="p">&lt;/</span><span class="nt">P</span><span class="p">&gt;</span>
<a id="__codelineno-6-52" name="__codelineno-6-52"></a>  <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>万里长征人未还。<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<a id="__codelineno-6-53" name="__codelineno-6-53"></a>  <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>但使<span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;#a2&quot;</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;word&quot;</span><span class="p">&gt;</span>龙城<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>飞将在，<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<a id="__codelineno-6-54" name="__codelineno-6-54"></a>  <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>不教胡马度<span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;#a3&quot;</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;word&quot;</span><span class="p">&gt;</span>阴山<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>。<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<a id="__codelineno-6-55" name="__codelineno-6-55"></a>  <span class="p">&lt;</span><span class="nt">br</span><span class="p">&gt;</span>
<a id="__codelineno-6-56" name="__codelineno-6-56"></a>  <span class="p">&lt;</span><span class="nt">hr</span><span class="p">&gt;</span>
<a id="__codelineno-6-57" name="__codelineno-6-57"></a>  <span class="p">&lt;</span><span class="nt">b</span><span class="p">&gt;</span>【注释】<span class="p">&lt;/</span><span class="nt">b</span><span class="p">&gt;</span>
<a id="__codelineno-6-58" name="__codelineno-6-58"></a>  <span class="p">&lt;</span><span class="nt">ol</span><span class="p">&gt;</span>
<a id="__codelineno-6-59" name="__codelineno-6-59"></a>    <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;&lt;</span><span class="nt">a</span> <span class="na">name</span><span class="o">=</span><span class="s">&quot;a1&quot;</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;detail&quot;</span><span class="p">&gt;</span>王昌龄<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>： (698年—757年)字少伯,唐朝时期大臣，著名边塞诗人。<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
<a id="__codelineno-6-60" name="__codelineno-6-60"></a>    <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;&lt;</span><span class="nt">a</span> <span class="na">name</span><span class="o">=</span><span class="s">&quot;a2&quot;</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;detail&quot;</span><span class="p">&gt;</span>龙城<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>：龙城是匈奴祭天集会的地方。<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
<a id="__codelineno-6-61" name="__codelineno-6-61"></a>    <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;&lt;</span><span class="nt">a</span> <span class="na">name</span><span class="o">=</span><span class="s">&quot;a3&quot;</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;detail&quot;</span><span class="p">&gt;</span>阴山<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>：昆仑山的北支，起自河套西北，横贯绥远、察哈尔及热河北部，是我国北方的屏障。<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
<a id="__codelineno-6-62" name="__codelineno-6-62"></a>  <span class="p">&lt;/</span><span class="nt">ol</span><span class="p">&gt;</span>
<a id="__codelineno-6-63" name="__codelineno-6-63"></a><span class="p">&lt;/</span><span class="nt">BODY</span><span class="p">&gt;</span>
<a id="__codelineno-6-64" name="__codelineno-6-64"></a>
<a id="__codelineno-6-65" name="__codelineno-6-65"></a><span class="p">&lt;/</span><span class="nt">HTML</span><span class="p">&gt;</span>
</code></pre></div></td></tr></table></div>
<h3 id="_4">综合</h3>
<h4 id="_5">导航菜单</h4>
<p>使用Html+Css实现页面顶部的导航菜单</p>
<ol>
<li>创建<code>css_nav_1.html</code>，用<strong>列表和CSS</strong>创建导航菜单，尝试改变菜单的外观，参考代码如下：</li>
</ol>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">nav/css_nav_1.html</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-7-1"> 1</a></span>
<span class="normal"><a href="#__codelineno-7-2"> 2</a></span>
<span class="normal"><a href="#__codelineno-7-3"> 3</a></span>
<span class="normal"><a href="#__codelineno-7-4"> 4</a></span>
<span class="normal"><a href="#__codelineno-7-5"> 5</a></span>
<span class="normal"><a href="#__codelineno-7-6"> 6</a></span>
<span class="normal"><a href="#__codelineno-7-7"> 7</a></span>
<span class="normal"><a href="#__codelineno-7-8"> 8</a></span>
<span class="normal"><a href="#__codelineno-7-9"> 9</a></span>
<span class="normal"><a href="#__codelineno-7-10">10</a></span>
<span class="normal"><a href="#__codelineno-7-11">11</a></span>
<span class="normal"><a href="#__codelineno-7-12">12</a></span>
<span class="normal"><a href="#__codelineno-7-13">13</a></span>
<span class="normal"><a href="#__codelineno-7-14">14</a></span>
<span class="normal"><a href="#__codelineno-7-15">15</a></span>
<span class="normal"><a href="#__codelineno-7-16">16</a></span>
<span class="normal"><a href="#__codelineno-7-17">17</a></span>
<span class="normal"><a href="#__codelineno-7-18">18</a></span>
<span class="normal"><a href="#__codelineno-7-19">19</a></span>
<span class="normal"><a href="#__codelineno-7-20">20</a></span>
<span class="normal"><a href="#__codelineno-7-21">21</a></span>
<span class="normal"><a href="#__codelineno-7-22">22</a></span>
<span class="normal"><a href="#__codelineno-7-23">23</a></span>
<span class="normal"><a href="#__codelineno-7-24">24</a></span>
<span class="normal"><a href="#__codelineno-7-25">25</a></span>
<span class="normal"><a href="#__codelineno-7-26">26</a></span>
<span class="normal"><a href="#__codelineno-7-27">27</a></span>
<span class="normal"><a href="#__codelineno-7-28">28</a></span>
<span class="normal"><a href="#__codelineno-7-29">29</a></span>
<span class="normal"><a href="#__codelineno-7-30">30</a></span>
<span class="normal"><a href="#__codelineno-7-31">31</a></span>
<span class="normal"><a href="#__codelineno-7-32">32</a></span>
<span class="normal"><a href="#__codelineno-7-33">33</a></span>
<span class="normal"><a href="#__codelineno-7-34">34</a></span>
<span class="normal"><a href="#__codelineno-7-35">35</a></span>
<span class="normal"><a href="#__codelineno-7-36">36</a></span>
<span class="normal"><a href="#__codelineno-7-37">37</a></span>
<span class="normal"><a href="#__codelineno-7-38">38</a></span>
<span class="normal"><a href="#__codelineno-7-39">39</a></span>
<span class="normal"><a href="#__codelineno-7-40">40</a></span>
<span class="normal"><a href="#__codelineno-7-41">41</a></span>
<span class="normal"><a href="#__codelineno-7-42">42</a></span>
<span class="normal"><a href="#__codelineno-7-43">43</a></span>
<span class="normal"><a href="#__codelineno-7-44">44</a></span>
<span class="normal"><a href="#__codelineno-7-45">45</a></span>
<span class="normal"><a href="#__codelineno-7-46">46</a></span>
<span class="normal"><a href="#__codelineno-7-47">47</a></span>
<span class="normal"><a href="#__codelineno-7-48">48</a></span>
<span class="normal"><a href="#__codelineno-7-49">49</a></span>
<span class="normal"><a href="#__codelineno-7-50">50</a></span>
<span class="normal"><a href="#__codelineno-7-51">51</a></span>
<span class="normal"><a href="#__codelineno-7-52">52</a></span>
<span class="normal"><a href="#__codelineno-7-53">53</a></span>
<span class="normal"><a href="#__codelineno-7-54">54</a></span>
<span class="normal"><a href="#__codelineno-7-55">55</a></span>
<span class="normal"><a href="#__codelineno-7-56">56</a></span>
<span class="normal"><a href="#__codelineno-7-57">57</a></span>
<span class="normal"><a href="#__codelineno-7-58">58</a></span>
<span class="normal"><a href="#__codelineno-7-59">59</a></span>
<span class="normal"><a href="#__codelineno-7-60">60</a></span>
<span class="normal"><a href="#__codelineno-7-61">61</a></span>
<span class="normal"><a href="#__codelineno-7-62">62</a></span>
<span class="normal"><a href="#__codelineno-7-63">63</a></span>
<span class="normal"><a href="#__codelineno-7-64">64</a></span>
<span class="normal"><a href="#__codelineno-7-65">65</a></span>
<span class="normal"><a href="#__codelineno-7-66">66</a></span>
<span class="normal"><a href="#__codelineno-7-67">67</a></span>
<span class="normal"><a href="#__codelineno-7-68">68</a></span>
<span class="normal"><a href="#__codelineno-7-69">69</a></span>
<span class="normal"><a href="#__codelineno-7-70">70</a></span>
<span class="normal"><a href="#__codelineno-7-71">71</a></span>
<span class="normal"><a href="#__codelineno-7-72">72</a></span>
<span class="normal"><a href="#__codelineno-7-73">73</a></span>
<span class="normal"><a href="#__codelineno-7-74">74</a></span>
<span class="normal"><a href="#__codelineno-7-75">75</a></span>
<span class="normal"><a href="#__codelineno-7-76">76</a></span>
<span class="normal"><a href="#__codelineno-7-77">77</a></span>
<span class="normal"><a href="#__codelineno-7-78">78</a></span>
<span class="normal"><a href="#__codelineno-7-79">79</a></span>
<span class="normal"><a href="#__codelineno-7-80">80</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-7-1" name="__codelineno-7-1"></a><span class="cp">&lt;!DOCTYPE html&gt;</span>
<a id="__codelineno-7-2" name="__codelineno-7-2"></a><span class="p">&lt;</span><span class="nt">html</span><span class="p">&gt;</span>
<a id="__codelineno-7-3" name="__codelineno-7-3"></a>
<a id="__codelineno-7-4" name="__codelineno-7-4"></a><span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
<a id="__codelineno-7-5" name="__codelineno-7-5"></a>  <span class="p">&lt;</span><span class="nt">style</span><span class="p">&gt;</span>
<a id="__codelineno-7-6" name="__codelineno-7-6"></a><span class="w">    </span><span class="nt">ul</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-7-7" name="__codelineno-7-7"></a><span class="w">      </span><span class="k">list-style-type</span><span class="p">:</span><span class="w"> </span><span class="kc">none</span><span class="p">;</span>
<a id="__codelineno-7-8" name="__codelineno-7-8"></a><span class="w">      </span><span class="k">margin</span><span class="p">:</span><span class="w"> </span><span class="mi">0</span><span class="p">;</span>
<a id="__codelineno-7-9" name="__codelineno-7-9"></a><span class="w">      </span><span class="k">padding</span><span class="p">:</span><span class="w"> </span><span class="mi">0</span><span class="p">;</span>
<a id="__codelineno-7-10" name="__codelineno-7-10"></a><span class="w">      </span><span class="k">overflow</span><span class="p">:</span><span class="w"> </span><span class="kc">hidden</span><span class="p">;</span>
<a id="__codelineno-7-11" name="__codelineno-7-11"></a><span class="w">      </span><span class="k">background-color</span><span class="p">:</span><span class="w"> </span><span class="mh">#333</span><span class="p">;</span>
<a id="__codelineno-7-12" name="__codelineno-7-12"></a><span class="w">    </span><span class="p">}</span>
<a id="__codelineno-7-13" name="__codelineno-7-13"></a>
<a id="__codelineno-7-14" name="__codelineno-7-14"></a><span class="w">    </span><span class="nt">li</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-7-15" name="__codelineno-7-15"></a><span class="w">      </span><span class="k">float</span><span class="p">:</span><span class="w"> </span><span class="kc">left</span><span class="p">;</span>
<a id="__codelineno-7-16" name="__codelineno-7-16"></a><span class="w">    </span><span class="p">}</span>
<a id="__codelineno-7-17" name="__codelineno-7-17"></a>
<a id="__codelineno-7-18" name="__codelineno-7-18"></a><span class="w">    </span><span class="nt">li</span><span class="w"> </span><span class="nt">a</span><span class="o">,</span>
<a id="__codelineno-7-19" name="__codelineno-7-19"></a><span class="w">    </span><span class="p">.</span><span class="nc">dropbtn</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-7-20" name="__codelineno-7-20"></a><span class="w">      </span><span class="k">display</span><span class="p">:</span><span class="w"> </span><span class="kc">inline-block</span><span class="p">;</span>
<a id="__codelineno-7-21" name="__codelineno-7-21"></a><span class="w">      </span><span class="k">color</span><span class="p">:</span><span class="w"> </span><span class="kc">white</span><span class="p">;</span>
<a id="__codelineno-7-22" name="__codelineno-7-22"></a><span class="w">      </span><span class="k">text-align</span><span class="p">:</span><span class="w"> </span><span class="kc">center</span><span class="p">;</span>
<a id="__codelineno-7-23" name="__codelineno-7-23"></a><span class="w">      </span><span class="k">padding</span><span class="p">:</span><span class="w"> </span><span class="mi">14</span><span class="kt">px</span><span class="w"> </span><span class="mi">16</span><span class="kt">px</span><span class="p">;</span>
<a id="__codelineno-7-24" name="__codelineno-7-24"></a><span class="w">      </span><span class="k">text-decoration</span><span class="p">:</span><span class="w"> </span><span class="kc">none</span><span class="p">;</span>
<a id="__codelineno-7-25" name="__codelineno-7-25"></a><span class="w">    </span><span class="p">}</span>
<a id="__codelineno-7-26" name="__codelineno-7-26"></a>
<a id="__codelineno-7-27" name="__codelineno-7-27"></a><span class="w">    </span><span class="nt">li</span><span class="w"> </span><span class="nt">a</span><span class="p">:</span><span class="nd">hover</span><span class="o">,</span>
<a id="__codelineno-7-28" name="__codelineno-7-28"></a><span class="w">    </span><span class="p">.</span><span class="nc">dropdown</span><span class="p">:</span><span class="nd">hover</span><span class="w"> </span><span class="p">.</span><span class="nc">dropbtn</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-7-29" name="__codelineno-7-29"></a><span class="w">      </span><span class="k">background-color</span><span class="p">:</span><span class="w"> </span><span class="kc">red</span><span class="p">;</span>
<a id="__codelineno-7-30" name="__codelineno-7-30"></a><span class="w">    </span><span class="p">}</span>
<a id="__codelineno-7-31" name="__codelineno-7-31"></a>
<a id="__codelineno-7-32" name="__codelineno-7-32"></a><span class="w">    </span><span class="nt">li</span><span class="p">.</span><span class="nc">dropdown</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-7-33" name="__codelineno-7-33"></a><span class="w">      </span><span class="k">display</span><span class="p">:</span><span class="w"> </span><span class="kc">inline-block</span><span class="p">;</span>
<a id="__codelineno-7-34" name="__codelineno-7-34"></a><span class="w">    </span><span class="p">}</span>
<a id="__codelineno-7-35" name="__codelineno-7-35"></a>
<a id="__codelineno-7-36" name="__codelineno-7-36"></a><span class="w">    </span><span class="p">.</span><span class="nc">dropdown-content</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-7-37" name="__codelineno-7-37"></a><span class="w">      </span><span class="k">display</span><span class="p">:</span><span class="w"> </span><span class="kc">none</span><span class="p">;</span>
<a id="__codelineno-7-38" name="__codelineno-7-38"></a><span class="w">      </span><span class="k">position</span><span class="p">:</span><span class="w"> </span><span class="kc">absolute</span><span class="p">;</span>
<a id="__codelineno-7-39" name="__codelineno-7-39"></a><span class="w">      </span><span class="k">background-color</span><span class="p">:</span><span class="w"> </span><span class="mh">#f9f9f9</span><span class="p">;</span>
<a id="__codelineno-7-40" name="__codelineno-7-40"></a><span class="w">      </span><span class="k">min-width</span><span class="p">:</span><span class="w"> </span><span class="mi">160</span><span class="kt">px</span><span class="p">;</span>
<a id="__codelineno-7-41" name="__codelineno-7-41"></a><span class="w">      </span><span class="k">box-shadow</span><span class="p">:</span><span class="w"> </span><span class="mi">0</span><span class="kt">px</span><span class="w"> </span><span class="mi">8</span><span class="kt">px</span><span class="w"> </span><span class="mi">16</span><span class="kt">px</span><span class="w"> </span><span class="mi">0</span><span class="kt">px</span><span class="w"> </span><span class="nb">rgba</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span><span class="w"> </span><span class="mi">0</span><span class="p">,</span><span class="w"> </span><span class="mi">0</span><span class="p">,</span><span class="w"> </span><span class="mf">0.2</span><span class="p">);</span>
<a id="__codelineno-7-42" name="__codelineno-7-42"></a><span class="w">      </span><span class="k">z-index</span><span class="p">:</span><span class="w"> </span><span class="mi">1</span><span class="p">;</span>
<a id="__codelineno-7-43" name="__codelineno-7-43"></a><span class="w">    </span><span class="p">}</span>
<a id="__codelineno-7-44" name="__codelineno-7-44"></a>
<a id="__codelineno-7-45" name="__codelineno-7-45"></a><span class="w">    </span><span class="p">.</span><span class="nc">dropdown-content</span><span class="w"> </span><span class="nt">a</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-7-46" name="__codelineno-7-46"></a><span class="w">      </span><span class="k">color</span><span class="p">:</span><span class="w"> </span><span class="kc">black</span><span class="p">;</span>
<a id="__codelineno-7-47" name="__codelineno-7-47"></a><span class="w">      </span><span class="k">padding</span><span class="p">:</span><span class="w"> </span><span class="mi">12</span><span class="kt">px</span><span class="w"> </span><span class="mi">16</span><span class="kt">px</span><span class="p">;</span>
<a id="__codelineno-7-48" name="__codelineno-7-48"></a><span class="w">      </span><span class="k">text-decoration</span><span class="p">:</span><span class="w"> </span><span class="kc">none</span><span class="p">;</span>
<a id="__codelineno-7-49" name="__codelineno-7-49"></a><span class="w">      </span><span class="k">display</span><span class="p">:</span><span class="w"> </span><span class="kc">block</span><span class="p">;</span>
<a id="__codelineno-7-50" name="__codelineno-7-50"></a><span class="w">      </span><span class="k">text-align</span><span class="p">:</span><span class="w"> </span><span class="kc">left</span><span class="p">;</span>
<a id="__codelineno-7-51" name="__codelineno-7-51"></a><span class="w">    </span><span class="p">}</span>
<a id="__codelineno-7-52" name="__codelineno-7-52"></a>
<a id="__codelineno-7-53" name="__codelineno-7-53"></a><span class="w">    </span><span class="p">.</span><span class="nc">dropdown-content</span><span class="w"> </span><span class="nt">a</span><span class="p">:</span><span class="nd">hover</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-7-54" name="__codelineno-7-54"></a><span class="w">      </span><span class="k">background-color</span><span class="p">:</span><span class="w"> </span><span class="mh">#f1f1f1</span><span class="p">;</span>
<a id="__codelineno-7-55" name="__codelineno-7-55"></a><span class="w">    </span><span class="p">}</span>
<a id="__codelineno-7-56" name="__codelineno-7-56"></a>
<a id="__codelineno-7-57" name="__codelineno-7-57"></a><span class="w">    </span><span class="p">.</span><span class="nc">dropdown</span><span class="p">:</span><span class="nd">hover</span><span class="w"> </span><span class="p">.</span><span class="nc">dropdown-content</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-7-58" name="__codelineno-7-58"></a><span class="w">      </span><span class="k">display</span><span class="p">:</span><span class="w"> </span><span class="kc">block</span><span class="p">;</span>
<a id="__codelineno-7-59" name="__codelineno-7-59"></a><span class="w">    </span><span class="p">}</span>
<a id="__codelineno-7-60" name="__codelineno-7-60"></a><span class="w">  </span><span class="p">&lt;/</span><span class="nt">style</span><span class="p">&gt;</span>
<a id="__codelineno-7-61" name="__codelineno-7-61"></a><span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
<a id="__codelineno-7-62" name="__codelineno-7-62"></a>
<a id="__codelineno-7-63" name="__codelineno-7-63"></a><span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
<a id="__codelineno-7-64" name="__codelineno-7-64"></a>  <span class="p">&lt;</span><span class="nt">ul</span><span class="p">&gt;</span>
<a id="__codelineno-7-65" name="__codelineno-7-65"></a>    <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;#home&quot;</span><span class="p">&gt;</span>首页<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
<a id="__codelineno-7-66" name="__codelineno-7-66"></a>    <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;#news&quot;</span><span class="p">&gt;</span>新闻<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
<a id="__codelineno-7-67" name="__codelineno-7-67"></a>    <span class="p">&lt;</span><span class="nt">li</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;dropdown&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-7-68" name="__codelineno-7-68"></a>      <span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;javascript:void(0)&quot;</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;dropbtn&quot;</span><span class="p">&gt;</span>运动<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>
<a id="__codelineno-7-69" name="__codelineno-7-69"></a>      <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;dropdown-content&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-7-70" name="__codelineno-7-70"></a>        <span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;#&quot;</span><span class="p">&gt;</span>足球<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>
<a id="__codelineno-7-71" name="__codelineno-7-71"></a>        <span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;#&quot;</span><span class="p">&gt;</span>篮球<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>
<a id="__codelineno-7-72" name="__codelineno-7-72"></a>        <span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;#&quot;</span><span class="p">&gt;</span>排球<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>
<a id="__codelineno-7-73" name="__codelineno-7-73"></a>      <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<a id="__codelineno-7-74" name="__codelineno-7-74"></a>    <span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
<a id="__codelineno-7-75" name="__codelineno-7-75"></a>  <span class="p">&lt;/</span><span class="nt">ul</span><span class="p">&gt;</span>
<a id="__codelineno-7-76" name="__codelineno-7-76"></a>  <span class="p">&lt;</span><span class="nt">h1</span><span class="p">&gt;</span>导航栏内的下拉菜单<span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span>
<a id="__codelineno-7-77" name="__codelineno-7-77"></a>  <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>请悬停到 &quot;运动&quot; 链接上，以查看下拉菜单。<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<a id="__codelineno-7-78" name="__codelineno-7-78"></a><span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<a id="__codelineno-7-79" name="__codelineno-7-79"></a>
<a id="__codelineno-7-80" name="__codelineno-7-80"></a><span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</code></pre></div></td></tr></table></div>
<h4 id="_6">对话框</h4>
<p>使用Html+Css实现具有标题、正文和关闭按钮的模式对话框，参考代码如下：</p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">model/css_model_1.html</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-8-1">  1</a></span>
<span class="normal"><a href="#__codelineno-8-2">  2</a></span>
<span class="normal"><a href="#__codelineno-8-3">  3</a></span>
<span class="normal"><a href="#__codelineno-8-4">  4</a></span>
<span class="normal"><a href="#__codelineno-8-5">  5</a></span>
<span class="normal"><a href="#__codelineno-8-6">  6</a></span>
<span class="normal"><a href="#__codelineno-8-7">  7</a></span>
<span class="normal"><a href="#__codelineno-8-8">  8</a></span>
<span class="normal"><a href="#__codelineno-8-9">  9</a></span>
<span class="normal"><a href="#__codelineno-8-10"> 10</a></span>
<span class="normal"><a href="#__codelineno-8-11"> 11</a></span>
<span class="normal"><a href="#__codelineno-8-12"> 12</a></span>
<span class="normal"><a href="#__codelineno-8-13"> 13</a></span>
<span class="normal"><a href="#__codelineno-8-14"> 14</a></span>
<span class="normal"><a href="#__codelineno-8-15"> 15</a></span>
<span class="normal"><a href="#__codelineno-8-16"> 16</a></span>
<span class="normal"><a href="#__codelineno-8-17"> 17</a></span>
<span class="normal"><a href="#__codelineno-8-18"> 18</a></span>
<span class="normal"><a href="#__codelineno-8-19"> 19</a></span>
<span class="normal"><a href="#__codelineno-8-20"> 20</a></span>
<span class="normal"><a href="#__codelineno-8-21"> 21</a></span>
<span class="normal"><a href="#__codelineno-8-22"> 22</a></span>
<span class="normal"><a href="#__codelineno-8-23"> 23</a></span>
<span class="normal"><a href="#__codelineno-8-24"> 24</a></span>
<span class="normal"><a href="#__codelineno-8-25"> 25</a></span>
<span class="normal"><a href="#__codelineno-8-26"> 26</a></span>
<span class="normal"><a href="#__codelineno-8-27"> 27</a></span>
<span class="normal"><a href="#__codelineno-8-28"> 28</a></span>
<span class="normal"><a href="#__codelineno-8-29"> 29</a></span>
<span class="normal"><a href="#__codelineno-8-30"> 30</a></span>
<span class="normal"><a href="#__codelineno-8-31"> 31</a></span>
<span class="normal"><a href="#__codelineno-8-32"> 32</a></span>
<span class="normal"><a href="#__codelineno-8-33"> 33</a></span>
<span class="normal"><a href="#__codelineno-8-34"> 34</a></span>
<span class="normal"><a href="#__codelineno-8-35"> 35</a></span>
<span class="normal"><a href="#__codelineno-8-36"> 36</a></span>
<span class="normal"><a href="#__codelineno-8-37"> 37</a></span>
<span class="normal"><a href="#__codelineno-8-38"> 38</a></span>
<span class="normal"><a href="#__codelineno-8-39"> 39</a></span>
<span class="normal"><a href="#__codelineno-8-40"> 40</a></span>
<span class="normal"><a href="#__codelineno-8-41"> 41</a></span>
<span class="normal"><a href="#__codelineno-8-42"> 42</a></span>
<span class="normal"><a href="#__codelineno-8-43"> 43</a></span>
<span class="normal"><a href="#__codelineno-8-44"> 44</a></span>
<span class="normal"><a href="#__codelineno-8-45"> 45</a></span>
<span class="normal"><a href="#__codelineno-8-46"> 46</a></span>
<span class="normal"><a href="#__codelineno-8-47"> 47</a></span>
<span class="normal"><a href="#__codelineno-8-48"> 48</a></span>
<span class="normal"><a href="#__codelineno-8-49"> 49</a></span>
<span class="normal"><a href="#__codelineno-8-50"> 50</a></span>
<span class="normal"><a href="#__codelineno-8-51"> 51</a></span>
<span class="normal"><a href="#__codelineno-8-52"> 52</a></span>
<span class="normal"><a href="#__codelineno-8-53"> 53</a></span>
<span class="normal"><a href="#__codelineno-8-54"> 54</a></span>
<span class="normal"><a href="#__codelineno-8-55"> 55</a></span>
<span class="normal"><a href="#__codelineno-8-56"> 56</a></span>
<span class="normal"><a href="#__codelineno-8-57"> 57</a></span>
<span class="normal"><a href="#__codelineno-8-58"> 58</a></span>
<span class="normal"><a href="#__codelineno-8-59"> 59</a></span>
<span class="normal"><a href="#__codelineno-8-60"> 60</a></span>
<span class="normal"><a href="#__codelineno-8-61"> 61</a></span>
<span class="normal"><a href="#__codelineno-8-62"> 62</a></span>
<span class="normal"><a href="#__codelineno-8-63"> 63</a></span>
<span class="normal"><a href="#__codelineno-8-64"> 64</a></span>
<span class="normal"><a href="#__codelineno-8-65"> 65</a></span>
<span class="normal"><a href="#__codelineno-8-66"> 66</a></span>
<span class="normal"><a href="#__codelineno-8-67"> 67</a></span>
<span class="normal"><a href="#__codelineno-8-68"> 68</a></span>
<span class="normal"><a href="#__codelineno-8-69"> 69</a></span>
<span class="normal"><a href="#__codelineno-8-70"> 70</a></span>
<span class="normal"><a href="#__codelineno-8-71"> 71</a></span>
<span class="normal"><a href="#__codelineno-8-72"> 72</a></span>
<span class="normal"><a href="#__codelineno-8-73"> 73</a></span>
<span class="normal"><a href="#__codelineno-8-74"> 74</a></span>
<span class="normal"><a href="#__codelineno-8-75"> 75</a></span>
<span class="normal"><a href="#__codelineno-8-76"> 76</a></span>
<span class="normal"><a href="#__codelineno-8-77"> 77</a></span>
<span class="normal"><a href="#__codelineno-8-78"> 78</a></span>
<span class="normal"><a href="#__codelineno-8-79"> 79</a></span>
<span class="normal"><a href="#__codelineno-8-80"> 80</a></span>
<span class="normal"><a href="#__codelineno-8-81"> 81</a></span>
<span class="normal"><a href="#__codelineno-8-82"> 82</a></span>
<span class="normal"><a href="#__codelineno-8-83"> 83</a></span>
<span class="normal"><a href="#__codelineno-8-84"> 84</a></span>
<span class="normal"><a href="#__codelineno-8-85"> 85</a></span>
<span class="normal"><a href="#__codelineno-8-86"> 86</a></span>
<span class="normal"><a href="#__codelineno-8-87"> 87</a></span>
<span class="normal"><a href="#__codelineno-8-88"> 88</a></span>
<span class="normal"><a href="#__codelineno-8-89"> 89</a></span>
<span class="normal"><a href="#__codelineno-8-90"> 90</a></span>
<span class="normal"><a href="#__codelineno-8-91"> 91</a></span>
<span class="normal"><a href="#__codelineno-8-92"> 92</a></span>
<span class="normal"><a href="#__codelineno-8-93"> 93</a></span>
<span class="normal"><a href="#__codelineno-8-94"> 94</a></span>
<span class="normal"><a href="#__codelineno-8-95"> 95</a></span>
<span class="normal"><a href="#__codelineno-8-96"> 96</a></span>
<span class="normal"><a href="#__codelineno-8-97"> 97</a></span>
<span class="normal"><a href="#__codelineno-8-98"> 98</a></span>
<span class="normal"><a href="#__codelineno-8-99"> 99</a></span>
<span class="normal"><a href="#__codelineno-8-100">100</a></span>
<span class="normal"><a href="#__codelineno-8-101">101</a></span>
<span class="normal"><a href="#__codelineno-8-102">102</a></span>
<span class="normal"><a href="#__codelineno-8-103">103</a></span>
<span class="normal"><a href="#__codelineno-8-104">104</a></span>
<span class="normal"><a href="#__codelineno-8-105">105</a></span>
<span class="normal"><a href="#__codelineno-8-106">106</a></span>
<span class="normal"><a href="#__codelineno-8-107">107</a></span>
<span class="normal"><a href="#__codelineno-8-108">108</a></span>
<span class="normal"><a href="#__codelineno-8-109">109</a></span>
<span class="normal"><a href="#__codelineno-8-110">110</a></span>
<span class="normal"><a href="#__codelineno-8-111">111</a></span>
<span class="normal"><a href="#__codelineno-8-112">112</a></span>
<span class="normal"><a href="#__codelineno-8-113">113</a></span>
<span class="normal"><a href="#__codelineno-8-114">114</a></span>
<span class="normal"><a href="#__codelineno-8-115">115</a></span>
<span class="normal"><a href="#__codelineno-8-116">116</a></span>
<span class="normal"><a href="#__codelineno-8-117">117</a></span>
<span class="normal"><a href="#__codelineno-8-118">118</a></span>
<span class="normal"><a href="#__codelineno-8-119">119</a></span>
<span class="normal"><a href="#__codelineno-8-120">120</a></span>
<span class="normal"><a href="#__codelineno-8-121">121</a></span>
<span class="normal"><a href="#__codelineno-8-122">122</a></span>
<span class="normal"><a href="#__codelineno-8-123">123</a></span>
<span class="normal"><a href="#__codelineno-8-124">124</a></span>
<span class="normal"><a href="#__codelineno-8-125">125</a></span>
<span class="normal"><a href="#__codelineno-8-126">126</a></span>
<span class="normal"><a href="#__codelineno-8-127">127</a></span>
<span class="normal"><a href="#__codelineno-8-128">128</a></span>
<span class="normal"><a href="#__codelineno-8-129">129</a></span>
<span class="normal"><a href="#__codelineno-8-130">130</a></span>
<span class="normal"><a href="#__codelineno-8-131">131</a></span>
<span class="normal"><a href="#__codelineno-8-132">132</a></span>
<span class="normal"><a href="#__codelineno-8-133">133</a></span>
<span class="normal"><a href="#__codelineno-8-134">134</a></span>
<span class="normal"><a href="#__codelineno-8-135">135</a></span>
<span class="normal"><a href="#__codelineno-8-136">136</a></span>
<span class="normal"><a href="#__codelineno-8-137">137</a></span>
<span class="normal"><a href="#__codelineno-8-138">138</a></span>
<span class="normal"><a href="#__codelineno-8-139">139</a></span>
<span class="normal"><a href="#__codelineno-8-140">140</a></span>
<span class="normal"><a href="#__codelineno-8-141">141</a></span>
<span class="normal"><a href="#__codelineno-8-142">142</a></span>
<span class="normal"><a href="#__codelineno-8-143">143</a></span>
<span class="normal"><a href="#__codelineno-8-144">144</a></span>
<span class="normal"><a href="#__codelineno-8-145">145</a></span>
<span class="normal"><a href="#__codelineno-8-146">146</a></span>
<span class="normal"><a href="#__codelineno-8-147">147</a></span>
<span class="normal"><a href="#__codelineno-8-148">148</a></span>
<span class="normal"><a href="#__codelineno-8-149">149</a></span>
<span class="normal"><a href="#__codelineno-8-150">150</a></span>
<span class="normal"><a href="#__codelineno-8-151">151</a></span>
<span class="normal"><a href="#__codelineno-8-152">152</a></span>
<span class="normal"><a href="#__codelineno-8-153">153</a></span>
<span class="normal"><a href="#__codelineno-8-154">154</a></span>
<span class="normal"><a href="#__codelineno-8-155">155</a></span>
<span class="normal"><a href="#__codelineno-8-156">156</a></span>
<span class="normal"><a href="#__codelineno-8-157">157</a></span>
<span class="normal"><a href="#__codelineno-8-158">158</a></span>
<span class="normal"><a href="#__codelineno-8-159">159</a></span>
<span class="normal"><a href="#__codelineno-8-160">160</a></span>
<span class="normal"><a href="#__codelineno-8-161">161</a></span>
<span class="normal"><a href="#__codelineno-8-162">162</a></span>
<span class="normal"><a href="#__codelineno-8-163">163</a></span>
<span class="normal"><a href="#__codelineno-8-164">164</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-8-1" name="__codelineno-8-1"></a><span class="cp">&lt;!DOCTYPE html&gt;</span>
<a id="__codelineno-8-2" name="__codelineno-8-2"></a><span class="p">&lt;</span><span class="nt">html</span><span class="p">&gt;</span>
<a id="__codelineno-8-3" name="__codelineno-8-3"></a>
<a id="__codelineno-8-4" name="__codelineno-8-4"></a><span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
<a id="__codelineno-8-5" name="__codelineno-8-5"></a>  <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">&quot;UTF-8&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-8-6" name="__codelineno-8-6"></a>  <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>模式对话框<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
<a id="__codelineno-8-7" name="__codelineno-8-7"></a>
<a id="__codelineno-8-8" name="__codelineno-8-8"></a>  <span class="p">&lt;</span><span class="nt">style</span><span class="p">&gt;</span>
<a id="__codelineno-8-9" name="__codelineno-8-9"></a><span class="w">    </span><span class="nt">body</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-8-10" name="__codelineno-8-10"></a><span class="w">      </span><span class="k">color</span><span class="p">:</span><span class="w"> </span><span class="mh">#333</span><span class="p">;</span>
<a id="__codelineno-8-11" name="__codelineno-8-11"></a><span class="w">      </span><span class="k">font-family</span><span class="p">:</span><span class="w"> </span><span class="s1">&#39;Helvetica&#39;</span><span class="p">,</span><span class="w"> </span><span class="n">arial</span><span class="p">;</span>
<a id="__codelineno-8-12" name="__codelineno-8-12"></a><span class="w">    </span><span class="p">}</span>
<a id="__codelineno-8-13" name="__codelineno-8-13"></a>
<a id="__codelineno-8-14" name="__codelineno-8-14"></a><span class="w">    </span><span class="p">.</span><span class="nc">wrap</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-8-15" name="__codelineno-8-15"></a><span class="w">      </span><span class="k">padding</span><span class="p">:</span><span class="w"> </span><span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<a id="__codelineno-8-16" name="__codelineno-8-16"></a><span class="w">      </span><span class="k">text-align</span><span class="p">:</span><span class="w"> </span><span class="kc">center</span><span class="p">;</span>
<a id="__codelineno-8-17" name="__codelineno-8-17"></a><span class="w">    </span><span class="p">}</span>
<a id="__codelineno-8-18" name="__codelineno-8-18"></a>
<a id="__codelineno-8-19" name="__codelineno-8-19"></a><span class="w">    </span><span class="nt">hr</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-8-20" name="__codelineno-8-20"></a><span class="w">      </span><span class="k">clear</span><span class="p">:</span><span class="w"> </span><span class="kc">both</span><span class="p">;</span>
<a id="__codelineno-8-21" name="__codelineno-8-21"></a><span class="w">      </span><span class="k">margin-top</span><span class="p">:</span><span class="w"> </span><span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<a id="__codelineno-8-22" name="__codelineno-8-22"></a><span class="w">      </span><span class="k">margin-bottom</span><span class="p">:</span><span class="w"> </span><span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<a id="__codelineno-8-23" name="__codelineno-8-23"></a><span class="w">      </span><span class="k">border</span><span class="p">:</span><span class="w"> </span><span class="mi">0</span><span class="p">;</span>
<a id="__codelineno-8-24" name="__codelineno-8-24"></a><span class="w">      </span><span class="k">border-top</span><span class="p">:</span><span class="w"> </span><span class="mi">1</span><span class="kt">px</span><span class="w"> </span><span class="kc">solid</span><span class="w"> </span><span class="mh">#aaa</span><span class="p">;</span>
<a id="__codelineno-8-25" name="__codelineno-8-25"></a><span class="w">    </span><span class="p">}</span>
<a id="__codelineno-8-26" name="__codelineno-8-26"></a>
<a id="__codelineno-8-27" name="__codelineno-8-27"></a><span class="w">    </span><span class="nt">h1</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-8-28" name="__codelineno-8-28"></a><span class="w">      </span><span class="k">font-size</span><span class="p">:</span><span class="w"> </span><span class="mi">30</span><span class="kt">px</span><span class="p">;</span>
<a id="__codelineno-8-29" name="__codelineno-8-29"></a><span class="w">      </span><span class="k">margin-bottom</span><span class="p">:</span><span class="w"> </span><span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<a id="__codelineno-8-30" name="__codelineno-8-30"></a><span class="w">    </span><span class="p">}</span>
<a id="__codelineno-8-31" name="__codelineno-8-31"></a>
<a id="__codelineno-8-32" name="__codelineno-8-32"></a><span class="w">    </span><span class="nt">p</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-8-33" name="__codelineno-8-33"></a><span class="w">      </span><span class="k">margin-bottom</span><span class="p">:</span><span class="w"> </span><span class="mi">20</span><span class="kt">px</span><span class="p">;</span>
<a id="__codelineno-8-34" name="__codelineno-8-34"></a><span class="w">    </span><span class="p">}</span>
<a id="__codelineno-8-35" name="__codelineno-8-35"></a>
<a id="__codelineno-8-36" name="__codelineno-8-36"></a><span class="w">    </span><span class="p">.</span><span class="nc">btn</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-8-37" name="__codelineno-8-37"></a><span class="w">      </span><span class="k">background</span><span class="p">:</span><span class="w"> </span><span class="mh">#428bca</span><span class="p">;</span>
<a id="__codelineno-8-38" name="__codelineno-8-38"></a><span class="w">      </span><span class="k">border</span><span class="p">:</span><span class="w"> </span><span class="mh">#357ebd</span><span class="w"> </span><span class="kc">solid</span><span class="w"> </span><span class="mi">1</span><span class="kt">px</span><span class="p">;</span>
<a id="__codelineno-8-39" name="__codelineno-8-39"></a><span class="w">      </span><span class="k">border-radius</span><span class="p">:</span><span class="w"> </span><span class="mi">3</span><span class="kt">px</span><span class="p">;</span>
<a id="__codelineno-8-40" name="__codelineno-8-40"></a><span class="w">      </span><span class="k">color</span><span class="p">:</span><span class="w"> </span><span class="mh">#fff</span><span class="p">;</span>
<a id="__codelineno-8-41" name="__codelineno-8-41"></a><span class="w">      </span><span class="k">display</span><span class="p">:</span><span class="w"> </span><span class="kc">inline-block</span><span class="p">;</span>
<a id="__codelineno-8-42" name="__codelineno-8-42"></a><span class="w">      </span><span class="k">font-size</span><span class="p">:</span><span class="w"> </span><span class="mi">14</span><span class="kt">px</span><span class="p">;</span>
<a id="__codelineno-8-43" name="__codelineno-8-43"></a><span class="w">      </span><span class="k">padding</span><span class="p">:</span><span class="w"> </span><span class="mi">8</span><span class="kt">px</span><span class="w"> </span><span class="mi">15</span><span class="kt">px</span><span class="p">;</span>
<a id="__codelineno-8-44" name="__codelineno-8-44"></a><span class="w">      </span><span class="k">text-decoration</span><span class="p">:</span><span class="w"> </span><span class="kc">none</span><span class="p">;</span>
<a id="__codelineno-8-45" name="__codelineno-8-45"></a><span class="w">      </span><span class="k">text-align</span><span class="p">:</span><span class="w"> </span><span class="kc">center</span><span class="p">;</span>
<a id="__codelineno-8-46" name="__codelineno-8-46"></a><span class="w">      </span><span class="k">min-width</span><span class="p">:</span><span class="w"> </span><span class="mi">60</span><span class="kt">px</span><span class="p">;</span>
<a id="__codelineno-8-47" name="__codelineno-8-47"></a><span class="w">      </span><span class="k">position</span><span class="p">:</span><span class="w"> </span><span class="kc">relative</span><span class="p">;</span>
<a id="__codelineno-8-48" name="__codelineno-8-48"></a><span class="w">      </span><span class="k">transition</span><span class="p">:</span><span class="w"> </span><span class="kc">color</span><span class="w"> </span><span class="mf">0.1</span><span class="kt">s</span><span class="w"> </span><span class="kc">ease</span><span class="p">;</span>
<a id="__codelineno-8-49" name="__codelineno-8-49"></a><span class="w">    </span><span class="p">}</span>
<a id="__codelineno-8-50" name="__codelineno-8-50"></a>
<a id="__codelineno-8-51" name="__codelineno-8-51"></a><span class="w">    </span><span class="p">.</span><span class="nc">btn</span><span class="p">:</span><span class="nd">hover</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-8-52" name="__codelineno-8-52"></a><span class="w">      </span><span class="k">background</span><span class="p">:</span><span class="w"> </span><span class="mh">#357ebd</span><span class="p">;</span>
<a id="__codelineno-8-53" name="__codelineno-8-53"></a><span class="w">    </span><span class="p">}</span>
<a id="__codelineno-8-54" name="__codelineno-8-54"></a>
<a id="__codelineno-8-55" name="__codelineno-8-55"></a><span class="w">    </span><span class="p">.</span><span class="nc">btn</span><span class="p">.</span><span class="nc">btn-big</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-8-56" name="__codelineno-8-56"></a><span class="w">      </span><span class="k">font-size</span><span class="p">:</span><span class="w"> </span><span class="mi">18</span><span class="kt">px</span><span class="p">;</span>
<a id="__codelineno-8-57" name="__codelineno-8-57"></a><span class="w">      </span><span class="k">padding</span><span class="p">:</span><span class="w"> </span><span class="mi">15</span><span class="kt">px</span><span class="w"> </span><span class="mi">20</span><span class="kt">px</span><span class="p">;</span>
<a id="__codelineno-8-58" name="__codelineno-8-58"></a><span class="w">      </span><span class="k">min-width</span><span class="p">:</span><span class="w"> </span><span class="mi">100</span><span class="kt">px</span><span class="p">;</span>
<a id="__codelineno-8-59" name="__codelineno-8-59"></a><span class="w">    </span><span class="p">}</span>
<a id="__codelineno-8-60" name="__codelineno-8-60"></a>
<a id="__codelineno-8-61" name="__codelineno-8-61"></a><span class="w">    </span><span class="p">.</span><span class="nc">btn-close</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-8-62" name="__codelineno-8-62"></a><span class="w">      </span><span class="k">color</span><span class="p">:</span><span class="w"> </span><span class="mh">#aaa</span><span class="p">;</span>
<a id="__codelineno-8-63" name="__codelineno-8-63"></a><span class="w">      </span><span class="k">font-size</span><span class="p">:</span><span class="w"> </span><span class="mi">30</span><span class="kt">px</span><span class="p">;</span>
<a id="__codelineno-8-64" name="__codelineno-8-64"></a><span class="w">      </span><span class="k">text-decoration</span><span class="p">:</span><span class="w"> </span><span class="kc">none</span><span class="p">;</span>
<a id="__codelineno-8-65" name="__codelineno-8-65"></a><span class="w">      </span><span class="k">position</span><span class="p">:</span><span class="w"> </span><span class="kc">absolute</span><span class="p">;</span>
<a id="__codelineno-8-66" name="__codelineno-8-66"></a><span class="w">      </span><span class="k">right</span><span class="p">:</span><span class="w"> </span><span class="mi">5</span><span class="kt">px</span><span class="p">;</span>
<a id="__codelineno-8-67" name="__codelineno-8-67"></a><span class="w">      </span><span class="k">top</span><span class="p">:</span><span class="w"> </span><span class="mi">0</span><span class="p">;</span>
<a id="__codelineno-8-68" name="__codelineno-8-68"></a><span class="w">    </span><span class="p">}</span>
<a id="__codelineno-8-69" name="__codelineno-8-69"></a>
<a id="__codelineno-8-70" name="__codelineno-8-70"></a><span class="w">    </span><span class="p">.</span><span class="nc">btn-close</span><span class="p">:</span><span class="nd">hover</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-8-71" name="__codelineno-8-71"></a><span class="w">      </span><span class="k">color</span><span class="p">:</span><span class="w"> </span><span class="mh">#919191</span><span class="p">;</span>
<a id="__codelineno-8-72" name="__codelineno-8-72"></a><span class="w">    </span><span class="p">}</span>
<a id="__codelineno-8-73" name="__codelineno-8-73"></a>
<a id="__codelineno-8-74" name="__codelineno-8-74"></a><span class="w">    </span><span class="p">.</span><span class="nc">modal</span><span class="p">:</span><span class="nd">before</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-8-75" name="__codelineno-8-75"></a><span class="w">      </span><span class="k">content</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;&quot;</span><span class="p">;</span>
<a id="__codelineno-8-76" name="__codelineno-8-76"></a><span class="w">      </span><span class="k">display</span><span class="p">:</span><span class="w"> </span><span class="kc">none</span><span class="p">;</span>
<a id="__codelineno-8-77" name="__codelineno-8-77"></a><span class="w">      </span><span class="k">background</span><span class="p">:</span><span class="w"> </span><span class="nb">rgba</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span><span class="w"> </span><span class="mi">0</span><span class="p">,</span><span class="w"> </span><span class="mi">0</span><span class="p">,</span><span class="w"> </span><span class="mf">0.6</span><span class="p">);</span>
<a id="__codelineno-8-78" name="__codelineno-8-78"></a><span class="w">      </span><span class="k">position</span><span class="p">:</span><span class="w"> </span><span class="kc">fixed</span><span class="p">;</span>
<a id="__codelineno-8-79" name="__codelineno-8-79"></a><span class="w">      </span><span class="k">top</span><span class="p">:</span><span class="w"> </span><span class="mi">0</span><span class="p">;</span>
<a id="__codelineno-8-80" name="__codelineno-8-80"></a><span class="w">      </span><span class="k">left</span><span class="p">:</span><span class="w"> </span><span class="mi">0</span><span class="p">;</span>
<a id="__codelineno-8-81" name="__codelineno-8-81"></a><span class="w">      </span><span class="k">right</span><span class="p">:</span><span class="w"> </span><span class="mi">0</span><span class="p">;</span>
<a id="__codelineno-8-82" name="__codelineno-8-82"></a><span class="w">      </span><span class="k">bottom</span><span class="p">:</span><span class="w"> </span><span class="mi">0</span><span class="p">;</span>
<a id="__codelineno-8-83" name="__codelineno-8-83"></a><span class="w">      </span><span class="k">z-index</span><span class="p">:</span><span class="w"> </span><span class="mi">10</span><span class="p">;</span>
<a id="__codelineno-8-84" name="__codelineno-8-84"></a><span class="w">    </span><span class="p">}</span>
<a id="__codelineno-8-85" name="__codelineno-8-85"></a>
<a id="__codelineno-8-86" name="__codelineno-8-86"></a><span class="w">    </span><span class="p">.</span><span class="nc">modal</span><span class="p">:</span><span class="nd">target</span><span class="p">:</span><span class="nd">before</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-8-87" name="__codelineno-8-87"></a><span class="w">      </span><span class="k">display</span><span class="p">:</span><span class="w"> </span><span class="kc">block</span><span class="p">;</span>
<a id="__codelineno-8-88" name="__codelineno-8-88"></a><span class="w">    </span><span class="p">}</span>
<a id="__codelineno-8-89" name="__codelineno-8-89"></a>
<a id="__codelineno-8-90" name="__codelineno-8-90"></a><span class="w">    </span><span class="p">.</span><span class="nc">modal</span><span class="p">:</span><span class="nd">target</span><span class="w"> </span><span class="p">.</span><span class="nc">modal-dialog</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-8-91" name="__codelineno-8-91"></a><span class="w">      </span><span class="kp">-webkit-</span><span class="k">transform</span><span class="p">:</span><span class="w"> </span><span class="nb">translate</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span><span class="w"> </span><span class="mi">0</span><span class="p">);</span>
<a id="__codelineno-8-92" name="__codelineno-8-92"></a><span class="w">      </span><span class="kp">-ms-</span><span class="k">transform</span><span class="p">:</span><span class="w"> </span><span class="nb">translate</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span><span class="w"> </span><span class="mi">0</span><span class="p">);</span>
<a id="__codelineno-8-93" name="__codelineno-8-93"></a><span class="w">      </span><span class="k">transform</span><span class="p">:</span><span class="w"> </span><span class="nb">translate</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span><span class="w"> </span><span class="mi">0</span><span class="p">);</span>
<a id="__codelineno-8-94" name="__codelineno-8-94"></a><span class="w">      </span><span class="k">top</span><span class="p">:</span><span class="w"> </span><span class="mi">20</span><span class="kt">%</span><span class="p">;</span>
<a id="__codelineno-8-95" name="__codelineno-8-95"></a><span class="w">    </span><span class="p">}</span>
<a id="__codelineno-8-96" name="__codelineno-8-96"></a>
<a id="__codelineno-8-97" name="__codelineno-8-97"></a><span class="w">    </span><span class="p">.</span><span class="nc">modal-dialog</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-8-98" name="__codelineno-8-98"></a><span class="w">      </span><span class="k">background</span><span class="p">:</span><span class="w"> </span><span class="mh">#fefefe</span><span class="p">;</span>
<a id="__codelineno-8-99" name="__codelineno-8-99"></a><span class="w">      </span><span class="k">border</span><span class="p">:</span><span class="w"> </span><span class="mh">#333</span><span class="w"> </span><span class="kc">solid</span><span class="w"> </span><span class="mi">1</span><span class="kt">px</span><span class="p">;</span>
<a id="__codelineno-8-100" name="__codelineno-8-100"></a><span class="w">      </span><span class="k">border-radius</span><span class="p">:</span><span class="w"> </span><span class="mi">5</span><span class="kt">px</span><span class="p">;</span>
<a id="__codelineno-8-101" name="__codelineno-8-101"></a><span class="w">      </span><span class="k">margin-left</span><span class="p">:</span><span class="w"> </span><span class="mi">-200</span><span class="kt">px</span><span class="p">;</span>
<a id="__codelineno-8-102" name="__codelineno-8-102"></a><span class="w">      </span><span class="k">position</span><span class="p">:</span><span class="w"> </span><span class="kc">fixed</span><span class="p">;</span>
<a id="__codelineno-8-103" name="__codelineno-8-103"></a><span class="w">      </span><span class="k">left</span><span class="p">:</span><span class="w"> </span><span class="mi">50</span><span class="kt">%</span><span class="p">;</span>
<a id="__codelineno-8-104" name="__codelineno-8-104"></a><span class="w">      </span><span class="k">top</span><span class="p">:</span><span class="w"> </span><span class="mi">-100</span><span class="kt">%</span><span class="p">;</span>
<a id="__codelineno-8-105" name="__codelineno-8-105"></a><span class="w">      </span><span class="k">z-index</span><span class="p">:</span><span class="w"> </span><span class="mi">11</span><span class="p">;</span>
<a id="__codelineno-8-106" name="__codelineno-8-106"></a><span class="w">      </span><span class="k">width</span><span class="p">:</span><span class="w"> </span><span class="mi">360</span><span class="kt">px</span><span class="p">;</span>
<a id="__codelineno-8-107" name="__codelineno-8-107"></a><span class="w">      </span><span class="kp">-webkit-</span><span class="k">transform</span><span class="p">:</span><span class="w"> </span><span class="nb">translate</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span><span class="w"> </span><span class="mi">-500</span><span class="kt">%</span><span class="p">);</span>
<a id="__codelineno-8-108" name="__codelineno-8-108"></a><span class="w">      </span><span class="kp">-ms-</span><span class="k">transform</span><span class="p">:</span><span class="w"> </span><span class="nb">translate</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span><span class="w"> </span><span class="mi">-500</span><span class="kt">%</span><span class="p">);</span>
<a id="__codelineno-8-109" name="__codelineno-8-109"></a><span class="w">      </span><span class="k">transform</span><span class="p">:</span><span class="w"> </span><span class="nb">translate</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span><span class="w"> </span><span class="mi">-500</span><span class="kt">%</span><span class="p">);</span>
<a id="__codelineno-8-110" name="__codelineno-8-110"></a><span class="w">      </span><span class="kp">-webkit-</span><span class="k">transition</span><span class="p">:</span><span class="w"> </span><span class="bp">-webkit-</span><span class="k">transform</span><span class="w"> </span><span class="mf">0.3</span><span class="kt">s</span><span class="w"> </span><span class="kc">ease-out</span><span class="p">;</span>
<a id="__codelineno-8-111" name="__codelineno-8-111"></a><span class="w">      </span><span class="kp">-moz-</span><span class="k">transition</span><span class="p">:</span><span class="w"> </span><span class="bp">-moz-</span><span class="k">transform</span><span class="w"> </span><span class="mf">0.3</span><span class="kt">s</span><span class="w"> </span><span class="kc">ease-out</span><span class="p">;</span>
<a id="__codelineno-8-112" name="__codelineno-8-112"></a><span class="w">      </span><span class="kp">-o-</span><span class="k">transition</span><span class="p">:</span><span class="w"> </span><span class="bp">-o-</span><span class="k">transform</span><span class="w"> </span><span class="mf">0.3</span><span class="kt">s</span><span class="w"> </span><span class="kc">ease-out</span><span class="p">;</span>
<a id="__codelineno-8-113" name="__codelineno-8-113"></a><span class="w">      </span><span class="k">transition</span><span class="p">:</span><span class="w"> </span><span class="k">transform</span><span class="w"> </span><span class="mf">0.3</span><span class="kt">s</span><span class="w"> </span><span class="kc">ease-out</span><span class="p">;</span>
<a id="__codelineno-8-114" name="__codelineno-8-114"></a><span class="w">    </span><span class="p">}</span>
<a id="__codelineno-8-115" name="__codelineno-8-115"></a>
<a id="__codelineno-8-116" name="__codelineno-8-116"></a><span class="w">    </span><span class="p">.</span><span class="nc">modal-body</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-8-117" name="__codelineno-8-117"></a><span class="w">      </span><span class="k">padding</span><span class="p">:</span><span class="w"> </span><span class="mi">20</span><span class="kt">px</span><span class="p">;</span>
<a id="__codelineno-8-118" name="__codelineno-8-118"></a><span class="w">    </span><span class="p">}</span>
<a id="__codelineno-8-119" name="__codelineno-8-119"></a>
<a id="__codelineno-8-120" name="__codelineno-8-120"></a><span class="w">    </span><span class="p">.</span><span class="nc">modal-header</span><span class="o">,</span>
<a id="__codelineno-8-121" name="__codelineno-8-121"></a><span class="w">    </span><span class="p">.</span><span class="nc">modal-footer</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-8-122" name="__codelineno-8-122"></a><span class="w">      </span><span class="k">padding</span><span class="p">:</span><span class="w"> </span><span class="mi">10</span><span class="kt">px</span><span class="w"> </span><span class="mi">20</span><span class="kt">px</span><span class="p">;</span>
<a id="__codelineno-8-123" name="__codelineno-8-123"></a><span class="w">    </span><span class="p">}</span>
<a id="__codelineno-8-124" name="__codelineno-8-124"></a>
<a id="__codelineno-8-125" name="__codelineno-8-125"></a><span class="w">    </span><span class="p">.</span><span class="nc">modal-header</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-8-126" name="__codelineno-8-126"></a><span class="w">      </span><span class="k">border-bottom</span><span class="p">:</span><span class="w"> </span><span class="mh">#eee</span><span class="w"> </span><span class="kc">solid</span><span class="w"> </span><span class="mi">1</span><span class="kt">px</span><span class="p">;</span>
<a id="__codelineno-8-127" name="__codelineno-8-127"></a><span class="w">    </span><span class="p">}</span>
<a id="__codelineno-8-128" name="__codelineno-8-128"></a>
<a id="__codelineno-8-129" name="__codelineno-8-129"></a><span class="w">    </span><span class="p">.</span><span class="nc">modal-header</span><span class="w"> </span><span class="nt">h2</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-8-130" name="__codelineno-8-130"></a><span class="w">      </span><span class="k">font-size</span><span class="p">:</span><span class="w"> </span><span class="mi">20</span><span class="kt">px</span><span class="p">;</span>
<a id="__codelineno-8-131" name="__codelineno-8-131"></a><span class="w">    </span><span class="p">}</span>
<a id="__codelineno-8-132" name="__codelineno-8-132"></a>
<a id="__codelineno-8-133" name="__codelineno-8-133"></a><span class="w">    </span><span class="p">.</span><span class="nc">modal-footer</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-8-134" name="__codelineno-8-134"></a><span class="w">      </span><span class="k">border-top</span><span class="p">:</span><span class="w"> </span><span class="mh">#eee</span><span class="w"> </span><span class="kc">solid</span><span class="w"> </span><span class="mi">1</span><span class="kt">px</span><span class="p">;</span>
<a id="__codelineno-8-135" name="__codelineno-8-135"></a><span class="w">      </span><span class="k">text-align</span><span class="p">:</span><span class="w"> </span><span class="kc">right</span><span class="p">;</span>
<a id="__codelineno-8-136" name="__codelineno-8-136"></a><span class="w">    </span><span class="p">}</span>
<a id="__codelineno-8-137" name="__codelineno-8-137"></a><span class="w">  </span><span class="p">&lt;/</span><span class="nt">style</span><span class="p">&gt;</span>
<a id="__codelineno-8-138" name="__codelineno-8-138"></a>
<a id="__codelineno-8-139" name="__codelineno-8-139"></a><span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
<a id="__codelineno-8-140" name="__codelineno-8-140"></a>
<a id="__codelineno-8-141" name="__codelineno-8-141"></a><span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
<a id="__codelineno-8-142" name="__codelineno-8-142"></a>  <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;wrap&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-8-143" name="__codelineno-8-143"></a>    <span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;#modal-one&quot;</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;btn btn-big&quot;</span><span class="p">&gt;</span>打开模式对话框<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>
<a id="__codelineno-8-144" name="__codelineno-8-144"></a>  <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<a id="__codelineno-8-145" name="__codelineno-8-145"></a>
<a id="__codelineno-8-146" name="__codelineno-8-146"></a>  <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;modal&quot;</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;modal-one&quot;</span> <span class="na">aria-hidden</span><span class="o">=</span><span class="s">&quot;true&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-8-147" name="__codelineno-8-147"></a>    <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;modal-dialog&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-8-148" name="__codelineno-8-148"></a>      <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;modal-header&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-8-149" name="__codelineno-8-149"></a>        <span class="p">&lt;</span><span class="nt">h2</span><span class="p">&gt;</span>这是标题<span class="p">&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span>
<a id="__codelineno-8-150" name="__codelineno-8-150"></a>        <span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;#&quot;</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;btn-close&quot;</span> <span class="na">aria-hidden</span><span class="o">=</span><span class="s">&quot;true&quot;</span><span class="p">&gt;</span>×<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>
<a id="__codelineno-8-151" name="__codelineno-8-151"></a>      <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<a id="__codelineno-8-152" name="__codelineno-8-152"></a>      <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;modal-body&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-8-153" name="__codelineno-8-153"></a>        <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>哇！这是正文<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<a id="__codelineno-8-154" name="__codelineno-8-154"></a>      <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<a id="__codelineno-8-155" name="__codelineno-8-155"></a>      <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;modal-footer&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-8-156" name="__codelineno-8-156"></a>        <span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;#&quot;</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;btn&quot;</span><span class="p">&gt;</span>关闭<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>
<a id="__codelineno-8-157" name="__codelineno-8-157"></a>        <span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;#&quot;</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;btn&quot;</span><span class="p">&gt;</span>保存<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>
<a id="__codelineno-8-158" name="__codelineno-8-158"></a>      <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<a id="__codelineno-8-159" name="__codelineno-8-159"></a>    <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<a id="__codelineno-8-160" name="__codelineno-8-160"></a>  <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<a id="__codelineno-8-161" name="__codelineno-8-161"></a>
<a id="__codelineno-8-162" name="__codelineno-8-162"></a><span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<a id="__codelineno-8-163" name="__codelineno-8-163"></a>
<a id="__codelineno-8-164" name="__codelineno-8-164"></a><span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</code></pre></div></td></tr></table></div>
<p>在浏览器中打开页面，改变浏览器窗口大小并观察效果</p>
<h4 id="_7">表单与表格</h4>
<p>使用CSS对<code>Html基础实现</code>中创建的<strong>学生表</strong>输入界面(表单)和展示(表格)进行美化，以下为学生表美化的参考代码：</p>
<p><strong>输入界面-学生表</strong></p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">stu/STUDENT_form_css.html</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-9-1"> 1</a></span>
<span class="normal"><a href="#__codelineno-9-2"> 2</a></span>
<span class="normal"><a href="#__codelineno-9-3"> 3</a></span>
<span class="normal"><a href="#__codelineno-9-4"> 4</a></span>
<span class="normal"><a href="#__codelineno-9-5"> 5</a></span>
<span class="normal"><a href="#__codelineno-9-6"> 6</a></span>
<span class="normal"><a href="#__codelineno-9-7"> 7</a></span>
<span class="normal"><a href="#__codelineno-9-8"> 8</a></span>
<span class="normal"><a href="#__codelineno-9-9"> 9</a></span>
<span class="normal"><a href="#__codelineno-9-10">10</a></span>
<span class="normal"><a href="#__codelineno-9-11">11</a></span>
<span class="normal"><a href="#__codelineno-9-12">12</a></span>
<span class="normal"><a href="#__codelineno-9-13">13</a></span>
<span class="normal"><a href="#__codelineno-9-14">14</a></span>
<span class="normal"><a href="#__codelineno-9-15">15</a></span>
<span class="normal"><a href="#__codelineno-9-16">16</a></span>
<span class="normal"><a href="#__codelineno-9-17">17</a></span>
<span class="normal"><a href="#__codelineno-9-18">18</a></span>
<span class="normal"><a href="#__codelineno-9-19">19</a></span>
<span class="normal"><a href="#__codelineno-9-20">20</a></span>
<span class="normal"><a href="#__codelineno-9-21">21</a></span>
<span class="normal"><a href="#__codelineno-9-22">22</a></span>
<span class="normal"><a href="#__codelineno-9-23">23</a></span>
<span class="normal"><a href="#__codelineno-9-24">24</a></span>
<span class="normal"><a href="#__codelineno-9-25">25</a></span>
<span class="normal"><a href="#__codelineno-9-26">26</a></span>
<span class="normal"><a href="#__codelineno-9-27">27</a></span>
<span class="normal"><a href="#__codelineno-9-28">28</a></span>
<span class="normal"><a href="#__codelineno-9-29">29</a></span>
<span class="normal"><a href="#__codelineno-9-30">30</a></span>
<span class="normal"><a href="#__codelineno-9-31">31</a></span>
<span class="normal"><a href="#__codelineno-9-32">32</a></span>
<span class="normal"><a href="#__codelineno-9-33">33</a></span>
<span class="normal"><a href="#__codelineno-9-34">34</a></span>
<span class="normal"><a href="#__codelineno-9-35">35</a></span>
<span class="normal"><a href="#__codelineno-9-36">36</a></span>
<span class="normal"><a href="#__codelineno-9-37">37</a></span>
<span class="normal"><a href="#__codelineno-9-38">38</a></span>
<span class="normal"><a href="#__codelineno-9-39">39</a></span>
<span class="normal"><a href="#__codelineno-9-40">40</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-9-1" name="__codelineno-9-1"></a><span class="cp">&lt;!DOCTYPE html&gt;</span>
<a id="__codelineno-9-2" name="__codelineno-9-2"></a><span class="p">&lt;</span><span class="nt">html</span><span class="p">&gt;</span>
<a id="__codelineno-9-3" name="__codelineno-9-3"></a>
<a id="__codelineno-9-4" name="__codelineno-9-4"></a><span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
<a id="__codelineno-9-5" name="__codelineno-9-5"></a>  <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">&quot;utf-8&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-9-6" name="__codelineno-9-6"></a>  <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>学生表<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
<a id="__codelineno-9-7" name="__codelineno-9-7"></a>  <span class="p">&lt;</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;stylesheet&quot;</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text/css&quot;</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;STUDENT_form.css&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-9-8" name="__codelineno-9-8"></a><span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
<a id="__codelineno-9-9" name="__codelineno-9-9"></a>
<a id="__codelineno-9-10" name="__codelineno-9-10"></a><span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
<a id="__codelineno-9-11" name="__codelineno-9-11"></a>  <span class="p">&lt;</span><span class="nt">h3</span><span class="p">&gt;</span>学生表<span class="p">&lt;/</span><span class="nt">h3</span><span class="p">&gt;</span>
<a id="__codelineno-9-12" name="__codelineno-9-12"></a>  <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;container&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-9-13" name="__codelineno-9-13"></a>    <span class="p">&lt;</span><span class="nt">form</span> <span class="na">action</span><span class="o">=</span><span class="s">&quot;#&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-9-14" name="__codelineno-9-14"></a>      <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span>
<a id="__codelineno-9-15" name="__codelineno-9-15"></a>        <span class="p">&lt;</span><span class="nt">label</span> <span class="na">for</span><span class="o">=</span><span class="s">&quot;no&quot;</span><span class="p">&gt;</span>学号:<span class="p">&lt;/</span><span class="nt">label</span><span class="p">&gt;</span>
<a id="__codelineno-9-16" name="__codelineno-9-16"></a>        <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text&quot;</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;no&quot;</span> <span class="na">name</span><span class="o">=</span><span class="s">&quot;no&quot;</span> <span class="na">placeholder</span><span class="o">=</span><span class="s">&quot;请输入学号..&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-9-17" name="__codelineno-9-17"></a>      <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<a id="__codelineno-9-18" name="__codelineno-9-18"></a>      <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span>
<a id="__codelineno-9-19" name="__codelineno-9-19"></a>        <span class="p">&lt;</span><span class="nt">label</span> <span class="na">for</span><span class="o">=</span><span class="s">&quot;name&quot;</span><span class="p">&gt;</span>姓名:<span class="p">&lt;/</span><span class="nt">label</span><span class="p">&gt;</span>
<a id="__codelineno-9-20" name="__codelineno-9-20"></a>        <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text&quot;</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;name&quot;</span> <span class="na">name</span><span class="o">=</span><span class="s">&quot;name&quot;</span> <span class="na">placeholder</span><span class="o">=</span><span class="s">&quot;请输入姓名..&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-9-21" name="__codelineno-9-21"></a>      <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<a id="__codelineno-9-22" name="__codelineno-9-22"></a>      <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span>
<a id="__codelineno-9-23" name="__codelineno-9-23"></a>        <span class="p">&lt;</span><span class="nt">label</span> <span class="na">for</span><span class="o">=</span><span class="s">&quot;gender&quot;</span><span class="p">&gt;</span>性别:<span class="p">&lt;/</span><span class="nt">label</span><span class="p">&gt;</span>
<a id="__codelineno-9-24" name="__codelineno-9-24"></a>        <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text&quot;</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;gender&quot;</span> <span class="na">name</span><span class="o">=</span><span class="s">&quot;gender&quot;</span> <span class="na">placeholder</span><span class="o">=</span><span class="s">&quot;请输入性别..&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-9-25" name="__codelineno-9-25"></a>      <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<a id="__codelineno-9-26" name="__codelineno-9-26"></a>      <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span>
<a id="__codelineno-9-27" name="__codelineno-9-27"></a>        <span class="p">&lt;</span><span class="nt">label</span> <span class="na">for</span><span class="o">=</span><span class="s">&quot;age&quot;</span><span class="p">&gt;</span>年龄:<span class="p">&lt;/</span><span class="nt">label</span><span class="p">&gt;</span>
<a id="__codelineno-9-28" name="__codelineno-9-28"></a>        <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;number&quot;</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;age&quot;</span> <span class="na">name</span><span class="o">=</span><span class="s">&quot;age&quot;</span> <span class="na">placeholder</span><span class="o">=</span><span class="s">&quot;请输入年龄..&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-9-29" name="__codelineno-9-29"></a>      <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<a id="__codelineno-9-30" name="__codelineno-9-30"></a>      <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span>
<a id="__codelineno-9-31" name="__codelineno-9-31"></a>        <span class="p">&lt;</span><span class="nt">label</span> <span class="na">for</span><span class="o">=</span><span class="s">&quot;dept&quot;</span><span class="p">&gt;</span>所在系:<span class="p">&lt;/</span><span class="nt">label</span><span class="p">&gt;</span>
<a id="__codelineno-9-32" name="__codelineno-9-32"></a>        <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text&quot;</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;dept&quot;</span> <span class="na">name</span><span class="o">=</span><span class="s">&quot;dept&quot;</span> <span class="na">placeholder</span><span class="o">=</span><span class="s">&quot;请输入所在系..&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-9-33" name="__codelineno-9-33"></a>      <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<a id="__codelineno-9-34" name="__codelineno-9-34"></a>
<a id="__codelineno-9-35" name="__codelineno-9-35"></a>      <span class="p">&lt;</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;submit&quot;</span><span class="p">&gt;</span>提交<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span>
<a id="__codelineno-9-36" name="__codelineno-9-36"></a>    <span class="p">&lt;/</span><span class="nt">form</span><span class="p">&gt;</span>
<a id="__codelineno-9-37" name="__codelineno-9-37"></a>  <span class="p">&lt;/</span><span class="nt">table</span><span class="p">&gt;</span>
<a id="__codelineno-9-38" name="__codelineno-9-38"></a><span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<a id="__codelineno-9-39" name="__codelineno-9-39"></a>
<a id="__codelineno-9-40" name="__codelineno-9-40"></a><span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</code></pre></div></td></tr></table></div>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">stu/STUDENT_form.css</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-10-1"> 1</a></span>
<span class="normal"><a href="#__codelineno-10-2"> 2</a></span>
<span class="normal"><a href="#__codelineno-10-3"> 3</a></span>
<span class="normal"><a href="#__codelineno-10-4"> 4</a></span>
<span class="normal"><a href="#__codelineno-10-5"> 5</a></span>
<span class="normal"><a href="#__codelineno-10-6"> 6</a></span>
<span class="normal"><a href="#__codelineno-10-7"> 7</a></span>
<span class="normal"><a href="#__codelineno-10-8"> 8</a></span>
<span class="normal"><a href="#__codelineno-10-9"> 9</a></span>
<span class="normal"><a href="#__codelineno-10-10">10</a></span>
<span class="normal"><a href="#__codelineno-10-11">11</a></span>
<span class="normal"><a href="#__codelineno-10-12">12</a></span>
<span class="normal"><a href="#__codelineno-10-13">13</a></span>
<span class="normal"><a href="#__codelineno-10-14">14</a></span>
<span class="normal"><a href="#__codelineno-10-15">15</a></span>
<span class="normal"><a href="#__codelineno-10-16">16</a></span>
<span class="normal"><a href="#__codelineno-10-17">17</a></span>
<span class="normal"><a href="#__codelineno-10-18">18</a></span>
<span class="normal"><a href="#__codelineno-10-19">19</a></span>
<span class="normal"><a href="#__codelineno-10-20">20</a></span>
<span class="normal"><a href="#__codelineno-10-21">21</a></span>
<span class="normal"><a href="#__codelineno-10-22">22</a></span>
<span class="normal"><a href="#__codelineno-10-23">23</a></span>
<span class="normal"><a href="#__codelineno-10-24">24</a></span>
<span class="normal"><a href="#__codelineno-10-25">25</a></span>
<span class="normal"><a href="#__codelineno-10-26">26</a></span>
<span class="normal"><a href="#__codelineno-10-27">27</a></span>
<span class="normal"><a href="#__codelineno-10-28">28</a></span>
<span class="normal"><a href="#__codelineno-10-29">29</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-10-1" name="__codelineno-10-1"></a><span class="nt">input</span><span class="o">[</span><span class="nt">type</span><span class="o">=</span><span class="nt">text</span><span class="o">],</span><span class="w"> </span><span class="nt">input</span><span class="o">[</span><span class="nt">type</span><span class="o">=</span><span class="nt">number</span><span class="o">],</span><span class="w"> </span><span class="nt">select</span><span class="o">,</span><span class="w"> </span><span class="nt">textarea</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-10-2" name="__codelineno-10-2"></a><span class="w">  </span><span class="k">width</span><span class="p">:</span><span class="w"> </span><span class="mi">100</span><span class="kt">%</span><span class="p">;</span>
<a id="__codelineno-10-3" name="__codelineno-10-3"></a><span class="w">  </span><span class="k">padding</span><span class="p">:</span><span class="w"> </span><span class="mi">12</span><span class="kt">px</span><span class="p">;</span>
<a id="__codelineno-10-4" name="__codelineno-10-4"></a><span class="w">  </span><span class="k">border</span><span class="p">:</span><span class="w"> </span><span class="mi">1</span><span class="kt">px</span><span class="w"> </span><span class="kc">solid</span><span class="w"> </span><span class="mh">#ccc</span><span class="p">;</span>
<a id="__codelineno-10-5" name="__codelineno-10-5"></a><span class="w">  </span><span class="k">border-radius</span><span class="p">:</span><span class="w"> </span><span class="mi">4</span><span class="kt">px</span><span class="p">;</span>
<a id="__codelineno-10-6" name="__codelineno-10-6"></a><span class="w">  </span><span class="k">box-sizing</span><span class="p">:</span><span class="w"> </span><span class="kc">border-box</span><span class="p">;</span>
<a id="__codelineno-10-7" name="__codelineno-10-7"></a><span class="w">  </span><span class="k">margin-top</span><span class="p">:</span><span class="w"> </span><span class="mi">6</span><span class="kt">px</span><span class="p">;</span>
<a id="__codelineno-10-8" name="__codelineno-10-8"></a><span class="w">  </span><span class="k">margin-bottom</span><span class="p">:</span><span class="w"> </span><span class="mi">16</span><span class="kt">px</span><span class="p">;</span>
<a id="__codelineno-10-9" name="__codelineno-10-9"></a><span class="w">  </span><span class="k">resize</span><span class="p">:</span><span class="w"> </span><span class="kc">vertical</span><span class="p">;</span>
<a id="__codelineno-10-10" name="__codelineno-10-10"></a><span class="p">}</span>
<a id="__codelineno-10-11" name="__codelineno-10-11"></a>
<a id="__codelineno-10-12" name="__codelineno-10-12"></a><span class="nt">input</span><span class="o">[</span><span class="nt">type</span><span class="o">=</span><span class="nt">submit</span><span class="o">]</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-10-13" name="__codelineno-10-13"></a><span class="w">  </span><span class="k">background-color</span><span class="p">:</span><span class="w"> </span><span class="mh">#4CAF50</span><span class="p">;</span>
<a id="__codelineno-10-14" name="__codelineno-10-14"></a><span class="w">  </span><span class="k">color</span><span class="p">:</span><span class="w"> </span><span class="kc">white</span><span class="p">;</span>
<a id="__codelineno-10-15" name="__codelineno-10-15"></a><span class="w">  </span><span class="k">padding</span><span class="p">:</span><span class="w"> </span><span class="mi">12</span><span class="kt">px</span><span class="w"> </span><span class="mi">20</span><span class="kt">px</span><span class="p">;</span>
<a id="__codelineno-10-16" name="__codelineno-10-16"></a><span class="w">  </span><span class="k">border</span><span class="p">:</span><span class="w"> </span><span class="kc">none</span><span class="p">;</span>
<a id="__codelineno-10-17" name="__codelineno-10-17"></a><span class="w">  </span><span class="k">border-radius</span><span class="p">:</span><span class="w"> </span><span class="mi">4</span><span class="kt">px</span><span class="p">;</span>
<a id="__codelineno-10-18" name="__codelineno-10-18"></a><span class="w">  </span><span class="k">cursor</span><span class="p">:</span><span class="w"> </span><span class="kc">pointer</span><span class="p">;</span>
<a id="__codelineno-10-19" name="__codelineno-10-19"></a><span class="p">}</span>
<a id="__codelineno-10-20" name="__codelineno-10-20"></a>
<a id="__codelineno-10-21" name="__codelineno-10-21"></a><span class="nt">input</span><span class="o">[</span><span class="nt">type</span><span class="o">=</span><span class="nt">submit</span><span class="o">]</span><span class="p">:</span><span class="nd">hover</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-10-22" name="__codelineno-10-22"></a><span class="w">  </span><span class="k">background-color</span><span class="p">:</span><span class="w"> </span><span class="mh">#45a049</span><span class="p">;</span>
<a id="__codelineno-10-23" name="__codelineno-10-23"></a><span class="p">}</span>
<a id="__codelineno-10-24" name="__codelineno-10-24"></a>
<a id="__codelineno-10-25" name="__codelineno-10-25"></a><span class="p">.</span><span class="nc">container</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-10-26" name="__codelineno-10-26"></a><span class="w">  </span><span class="k">border-radius</span><span class="p">:</span><span class="w"> </span><span class="mi">5</span><span class="kt">px</span><span class="p">;</span>
<a id="__codelineno-10-27" name="__codelineno-10-27"></a><span class="w">  </span><span class="k">background-color</span><span class="p">:</span><span class="w"> </span><span class="mh">#f2f2f2</span><span class="p">;</span>
<a id="__codelineno-10-28" name="__codelineno-10-28"></a><span class="w">  </span><span class="k">padding</span><span class="p">:</span><span class="w"> </span><span class="mi">20</span><span class="kt">px</span><span class="p">;</span>
<a id="__codelineno-10-29" name="__codelineno-10-29"></a><span class="p">}</span>
</code></pre></div></td></tr></table></div>
<p><strong>展示界面-学生表</strong></p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">stu/STUDENT_table_css.html</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-11-1"> 1</a></span>
<span class="normal"><a href="#__codelineno-11-2"> 2</a></span>
<span class="normal"><a href="#__codelineno-11-3"> 3</a></span>
<span class="normal"><a href="#__codelineno-11-4"> 4</a></span>
<span class="normal"><a href="#__codelineno-11-5"> 5</a></span>
<span class="normal"><a href="#__codelineno-11-6"> 6</a></span>
<span class="normal"><a href="#__codelineno-11-7"> 7</a></span>
<span class="normal"><a href="#__codelineno-11-8"> 8</a></span>
<span class="normal"><a href="#__codelineno-11-9"> 9</a></span>
<span class="normal"><a href="#__codelineno-11-10">10</a></span>
<span class="normal"><a href="#__codelineno-11-11">11</a></span>
<span class="normal"><a href="#__codelineno-11-12">12</a></span>
<span class="normal"><a href="#__codelineno-11-13">13</a></span>
<span class="normal"><a href="#__codelineno-11-14">14</a></span>
<span class="normal"><a href="#__codelineno-11-15">15</a></span>
<span class="normal"><a href="#__codelineno-11-16">16</a></span>
<span class="normal"><a href="#__codelineno-11-17">17</a></span>
<span class="normal"><a href="#__codelineno-11-18">18</a></span>
<span class="normal"><a href="#__codelineno-11-19">19</a></span>
<span class="normal"><a href="#__codelineno-11-20">20</a></span>
<span class="normal"><a href="#__codelineno-11-21">21</a></span>
<span class="normal"><a href="#__codelineno-11-22">22</a></span>
<span class="normal"><a href="#__codelineno-11-23">23</a></span>
<span class="normal"><a href="#__codelineno-11-24">24</a></span>
<span class="normal"><a href="#__codelineno-11-25">25</a></span>
<span class="normal"><a href="#__codelineno-11-26">26</a></span>
<span class="normal"><a href="#__codelineno-11-27">27</a></span>
<span class="normal"><a href="#__codelineno-11-28">28</a></span>
<span class="normal"><a href="#__codelineno-11-29">29</a></span>
<span class="normal"><a href="#__codelineno-11-30">30</a></span>
<span class="normal"><a href="#__codelineno-11-31">31</a></span>
<span class="normal"><a href="#__codelineno-11-32">32</a></span>
<span class="normal"><a href="#__codelineno-11-33">33</a></span>
<span class="normal"><a href="#__codelineno-11-34">34</a></span>
<span class="normal"><a href="#__codelineno-11-35">35</a></span>
<span class="normal"><a href="#__codelineno-11-36">36</a></span>
<span class="normal"><a href="#__codelineno-11-37">37</a></span>
<span class="normal"><a href="#__codelineno-11-38">38</a></span>
<span class="normal"><a href="#__codelineno-11-39">39</a></span>
<span class="normal"><a href="#__codelineno-11-40">40</a></span>
<span class="normal"><a href="#__codelineno-11-41">41</a></span>
<span class="normal"><a href="#__codelineno-11-42">42</a></span>
<span class="normal"><a href="#__codelineno-11-43">43</a></span>
<span class="normal"><a href="#__codelineno-11-44">44</a></span>
<span class="normal"><a href="#__codelineno-11-45">45</a></span>
<span class="normal"><a href="#__codelineno-11-46">46</a></span>
<span class="normal"><a href="#__codelineno-11-47">47</a></span>
<span class="normal"><a href="#__codelineno-11-48">48</a></span>
<span class="normal"><a href="#__codelineno-11-49">49</a></span>
<span class="normal"><a href="#__codelineno-11-50">50</a></span>
<span class="normal"><a href="#__codelineno-11-51">51</a></span>
<span class="normal"><a href="#__codelineno-11-52">52</a></span>
<span class="normal"><a href="#__codelineno-11-53">53</a></span>
<span class="normal"><a href="#__codelineno-11-54">54</a></span>
<span class="normal"><a href="#__codelineno-11-55">55</a></span>
<span class="normal"><a href="#__codelineno-11-56">56</a></span>
<span class="normal"><a href="#__codelineno-11-57">57</a></span>
<span class="normal"><a href="#__codelineno-11-58">58</a></span>
<span class="normal"><a href="#__codelineno-11-59">59</a></span>
<span class="normal"><a href="#__codelineno-11-60">60</a></span>
<span class="normal"><a href="#__codelineno-11-61">61</a></span>
<span class="normal"><a href="#__codelineno-11-62">62</a></span>
<span class="normal"><a href="#__codelineno-11-63">63</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-11-1" name="__codelineno-11-1"></a><span class="cp">&lt;!DOCTYPE html&gt;</span>
<a id="__codelineno-11-2" name="__codelineno-11-2"></a><span class="p">&lt;</span><span class="nt">html</span><span class="p">&gt;</span>
<a id="__codelineno-11-3" name="__codelineno-11-3"></a>
<a id="__codelineno-11-4" name="__codelineno-11-4"></a><span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
<a id="__codelineno-11-5" name="__codelineno-11-5"></a>  <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">&quot;utf-8&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-11-6" name="__codelineno-11-6"></a>  <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>学生表<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
<a id="__codelineno-11-7" name="__codelineno-11-7"></a>  <span class="p">&lt;</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;stylesheet&quot;</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text/css&quot;</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;STUDENT_table.css&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-11-8" name="__codelineno-11-8"></a><span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
<a id="__codelineno-11-9" name="__codelineno-11-9"></a>
<a id="__codelineno-11-10" name="__codelineno-11-10"></a><span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
<a id="__codelineno-11-11" name="__codelineno-11-11"></a>  <span class="p">&lt;</span><span class="nt">h3</span><span class="p">&gt;</span>学生表<span class="p">&lt;/</span><span class="nt">h3</span><span class="p">&gt;</span>
<a id="__codelineno-11-12" name="__codelineno-11-12"></a>  <span class="p">&lt;</span><span class="nt">table</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;STUDENT&quot;</span> <span class="na">border</span><span class="o">=</span><span class="s">&quot;1&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-11-13" name="__codelineno-11-13"></a>    <span class="p">&lt;</span><span class="nt">thead</span><span class="p">&gt;</span>
<a id="__codelineno-11-14" name="__codelineno-11-14"></a>      <span class="p">&lt;</span><span class="nt">th</span><span class="p">&gt;&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;checkbox&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">th</span><span class="p">&gt;</span>
<a id="__codelineno-11-15" name="__codelineno-11-15"></a>      <span class="p">&lt;</span><span class="nt">th</span><span class="p">&gt;</span>学号<span class="p">&lt;/</span><span class="nt">th</span><span class="p">&gt;</span>
<a id="__codelineno-11-16" name="__codelineno-11-16"></a>      <span class="p">&lt;</span><span class="nt">th</span><span class="p">&gt;</span>姓名<span class="p">&lt;/</span><span class="nt">th</span><span class="p">&gt;</span>
<a id="__codelineno-11-17" name="__codelineno-11-17"></a>      <span class="p">&lt;</span><span class="nt">th</span><span class="p">&gt;</span>性别<span class="p">&lt;/</span><span class="nt">th</span><span class="p">&gt;</span>
<a id="__codelineno-11-18" name="__codelineno-11-18"></a>      <span class="p">&lt;</span><span class="nt">th</span><span class="p">&gt;</span>年龄<span class="p">&lt;/</span><span class="nt">th</span><span class="p">&gt;</span>
<a id="__codelineno-11-19" name="__codelineno-11-19"></a>      <span class="p">&lt;</span><span class="nt">th</span><span class="p">&gt;</span>所在系<span class="p">&lt;/</span><span class="nt">th</span><span class="p">&gt;</span>
<a id="__codelineno-11-20" name="__codelineno-11-20"></a>      <span class="p">&lt;</span><span class="nt">th</span><span class="p">&gt;</span>操作<span class="p">&lt;/</span><span class="nt">th</span><span class="p">&gt;</span>
<a id="__codelineno-11-21" name="__codelineno-11-21"></a>    <span class="p">&lt;/</span><span class="nt">thead</span><span class="p">&gt;</span>
<a id="__codelineno-11-22" name="__codelineno-11-22"></a>    <span class="p">&lt;</span><span class="nt">tbody</span><span class="p">&gt;</span>
<a id="__codelineno-11-23" name="__codelineno-11-23"></a>      <span class="p">&lt;</span><span class="nt">tr</span><span class="p">&gt;</span>
<a id="__codelineno-11-24" name="__codelineno-11-24"></a>        <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;checkbox&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<a id="__codelineno-11-25" name="__codelineno-11-25"></a>        <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>200215121<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<a id="__codelineno-11-26" name="__codelineno-11-26"></a>        <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>李勇<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<a id="__codelineno-11-27" name="__codelineno-11-27"></a>        <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>男<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<a id="__codelineno-11-28" name="__codelineno-11-28"></a>        <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>20<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<a id="__codelineno-11-29" name="__codelineno-11-29"></a>        <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>CS<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<a id="__codelineno-11-30" name="__codelineno-11-30"></a>        <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;javascript:void()&quot;</span><span class="p">&gt;</span>修改<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<a id="__codelineno-11-31" name="__codelineno-11-31"></a>      <span class="p">&lt;/</span><span class="nt">tr</span><span class="p">&gt;</span>
<a id="__codelineno-11-32" name="__codelineno-11-32"></a>      <span class="p">&lt;</span><span class="nt">tr</span><span class="p">&gt;</span>
<a id="__codelineno-11-33" name="__codelineno-11-33"></a>        <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;checkbox&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<a id="__codelineno-11-34" name="__codelineno-11-34"></a>        <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>200215122<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<a id="__codelineno-11-35" name="__codelineno-11-35"></a>        <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>刘晨<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<a id="__codelineno-11-36" name="__codelineno-11-36"></a>        <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>女<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<a id="__codelineno-11-37" name="__codelineno-11-37"></a>        <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>19<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<a id="__codelineno-11-38" name="__codelineno-11-38"></a>        <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>CS<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<a id="__codelineno-11-39" name="__codelineno-11-39"></a>        <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;javascript:void()&quot;</span><span class="p">&gt;</span>修改<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<a id="__codelineno-11-40" name="__codelineno-11-40"></a>      <span class="p">&lt;/</span><span class="nt">tr</span><span class="p">&gt;</span>
<a id="__codelineno-11-41" name="__codelineno-11-41"></a>      <span class="p">&lt;</span><span class="nt">tr</span><span class="p">&gt;</span>
<a id="__codelineno-11-42" name="__codelineno-11-42"></a>        <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;checkbox&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<a id="__codelineno-11-43" name="__codelineno-11-43"></a>        <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>200215123<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<a id="__codelineno-11-44" name="__codelineno-11-44"></a>        <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>王敏<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<a id="__codelineno-11-45" name="__codelineno-11-45"></a>        <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>女<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<a id="__codelineno-11-46" name="__codelineno-11-46"></a>        <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>18<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<a id="__codelineno-11-47" name="__codelineno-11-47"></a>        <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>MA<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<a id="__codelineno-11-48" name="__codelineno-11-48"></a>        <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;javascript:void()&quot;</span><span class="p">&gt;</span>修改<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<a id="__codelineno-11-49" name="__codelineno-11-49"></a>      <span class="p">&lt;/</span><span class="nt">tr</span><span class="p">&gt;</span>
<a id="__codelineno-11-50" name="__codelineno-11-50"></a>      <span class="p">&lt;</span><span class="nt">tr</span><span class="p">&gt;</span>
<a id="__codelineno-11-51" name="__codelineno-11-51"></a>        <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;checkbox&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<a id="__codelineno-11-52" name="__codelineno-11-52"></a>        <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>200515125<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<a id="__codelineno-11-53" name="__codelineno-11-53"></a>        <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>张立<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<a id="__codelineno-11-54" name="__codelineno-11-54"></a>        <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>男<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<a id="__codelineno-11-55" name="__codelineno-11-55"></a>        <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>19<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<a id="__codelineno-11-56" name="__codelineno-11-56"></a>        <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>IS<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<a id="__codelineno-11-57" name="__codelineno-11-57"></a>        <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;javascript:void()&quot;</span><span class="p">&gt;</span>修改<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<a id="__codelineno-11-58" name="__codelineno-11-58"></a>      <span class="p">&lt;/</span><span class="nt">tr</span><span class="p">&gt;</span>
<a id="__codelineno-11-59" name="__codelineno-11-59"></a>    <span class="p">&lt;/</span><span class="nt">tbody</span><span class="p">&gt;</span>
<a id="__codelineno-11-60" name="__codelineno-11-60"></a>  <span class="p">&lt;/</span><span class="nt">table</span><span class="p">&gt;</span>
<a id="__codelineno-11-61" name="__codelineno-11-61"></a><span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<a id="__codelineno-11-62" name="__codelineno-11-62"></a>
<a id="__codelineno-11-63" name="__codelineno-11-63"></a><span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</code></pre></div></td></tr></table></div>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">stu/STUDENT_table.css</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-12-1"> 1</a></span>
<span class="normal"><a href="#__codelineno-12-2"> 2</a></span>
<span class="normal"><a href="#__codelineno-12-3"> 3</a></span>
<span class="normal"><a href="#__codelineno-12-4"> 4</a></span>
<span class="normal"><a href="#__codelineno-12-5"> 5</a></span>
<span class="normal"><a href="#__codelineno-12-6"> 6</a></span>
<span class="normal"><a href="#__codelineno-12-7"> 7</a></span>
<span class="normal"><a href="#__codelineno-12-8"> 8</a></span>
<span class="normal"><a href="#__codelineno-12-9"> 9</a></span>
<span class="normal"><a href="#__codelineno-12-10">10</a></span>
<span class="normal"><a href="#__codelineno-12-11">11</a></span>
<span class="normal"><a href="#__codelineno-12-12">12</a></span>
<span class="normal"><a href="#__codelineno-12-13">13</a></span>
<span class="normal"><a href="#__codelineno-12-14">14</a></span>
<span class="normal"><a href="#__codelineno-12-15">15</a></span>
<span class="normal"><a href="#__codelineno-12-16">16</a></span>
<span class="normal"><a href="#__codelineno-12-17">17</a></span>
<span class="normal"><a href="#__codelineno-12-18">18</a></span>
<span class="normal"><a href="#__codelineno-12-19">19</a></span>
<span class="normal"><a href="#__codelineno-12-20">20</a></span>
<span class="normal"><a href="#__codelineno-12-21">21</a></span>
<span class="normal"><a href="#__codelineno-12-22">22</a></span>
<span class="normal"><a href="#__codelineno-12-23">23</a></span>
<span class="normal"><a href="#__codelineno-12-24">24</a></span>
<span class="normal"><a href="#__codelineno-12-25">25</a></span>
<span class="normal"><a href="#__codelineno-12-26">26</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-12-1" name="__codelineno-12-1"></a><span class="p">#</span><span class="nn">STUDENT</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-12-2" name="__codelineno-12-2"></a><span class="w">  </span><span class="k">font-family</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;Trebuchet MS&quot;</span><span class="p">,</span><span class="w"> </span><span class="n">Arial</span><span class="p">,</span><span class="w"> </span><span class="n">Helvetica</span><span class="p">,</span><span class="w"> </span><span class="kc">sans-serif</span><span class="p">;</span>
<a id="__codelineno-12-3" name="__codelineno-12-3"></a><span class="w">  </span><span class="k">width</span><span class="p">:</span><span class="w"> </span><span class="mi">100</span><span class="kt">%</span><span class="p">;</span>
<a id="__codelineno-12-4" name="__codelineno-12-4"></a><span class="w">  </span><span class="k">border-collapse</span><span class="p">:</span><span class="w"> </span><span class="kc">collapse</span><span class="p">;</span>
<a id="__codelineno-12-5" name="__codelineno-12-5"></a><span class="p">}</span>
<a id="__codelineno-12-6" name="__codelineno-12-6"></a>
<a id="__codelineno-12-7" name="__codelineno-12-7"></a><span class="p">#</span><span class="nn">STUDENT</span><span class="w"> </span><span class="nt">td</span><span class="o">,</span>
<a id="__codelineno-12-8" name="__codelineno-12-8"></a><span class="p">#</span><span class="nn">STUDENT</span><span class="w"> </span><span class="nt">th</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-12-9" name="__codelineno-12-9"></a><span class="w">  </span><span class="k">font-size</span><span class="p">:</span><span class="w"> </span><span class="mi">1</span><span class="kt">em</span><span class="p">;</span>
<a id="__codelineno-12-10" name="__codelineno-12-10"></a><span class="w">  </span><span class="k">border</span><span class="p">:</span><span class="w"> </span><span class="mi">1</span><span class="kt">px</span><span class="w"> </span><span class="kc">solid</span><span class="w"> </span><span class="nb">rgb</span><span class="p">(</span><span class="mi">223</span><span class="p">,</span><span class="w"> </span><span class="mi">224</span><span class="p">,</span><span class="w"> </span><span class="mi">225</span><span class="p">);</span>
<a id="__codelineno-12-11" name="__codelineno-12-11"></a><span class="w">  </span><span class="k">padding</span><span class="p">:</span><span class="w"> </span><span class="mi">3</span><span class="kt">px</span><span class="w"> </span><span class="mi">7</span><span class="kt">px</span><span class="w"> </span><span class="mi">2</span><span class="kt">px</span><span class="w"> </span><span class="mi">7</span><span class="kt">px</span><span class="p">;</span>
<a id="__codelineno-12-12" name="__codelineno-12-12"></a><span class="p">}</span>
<a id="__codelineno-12-13" name="__codelineno-12-13"></a>
<a id="__codelineno-12-14" name="__codelineno-12-14"></a><span class="p">#</span><span class="nn">STUDENT</span><span class="w"> </span><span class="nt">th</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-12-15" name="__codelineno-12-15"></a><span class="w">  </span><span class="k">font-size</span><span class="p">:</span><span class="w"> </span><span class="mf">1.1</span><span class="kt">em</span><span class="p">;</span>
<a id="__codelineno-12-16" name="__codelineno-12-16"></a><span class="w">  </span><span class="k">text-align</span><span class="p">:</span><span class="w"> </span><span class="kc">left</span><span class="p">;</span>
<a id="__codelineno-12-17" name="__codelineno-12-17"></a><span class="w">  </span><span class="k">padding-top</span><span class="p">:</span><span class="w"> </span><span class="mi">5</span><span class="kt">px</span><span class="p">;</span>
<a id="__codelineno-12-18" name="__codelineno-12-18"></a><span class="w">  </span><span class="k">padding-bottom</span><span class="p">:</span><span class="w"> </span><span class="mi">4</span><span class="kt">px</span><span class="p">;</span>
<a id="__codelineno-12-19" name="__codelineno-12-19"></a><span class="w">  </span><span class="k">background-color</span><span class="p">:</span><span class="w"> </span><span class="nb">rgb</span><span class="p">(</span><span class="mi">223</span><span class="p">,</span><span class="w"> </span><span class="mi">224</span><span class="p">,</span><span class="w"> </span><span class="mi">225</span><span class="p">);</span>
<a id="__codelineno-12-20" name="__codelineno-12-20"></a><span class="w">  </span><span class="k">color</span><span class="p">:</span><span class="w"> </span><span class="mh">#000000</span><span class="p">;</span>
<a id="__codelineno-12-21" name="__codelineno-12-21"></a><span class="p">}</span>
<a id="__codelineno-12-22" name="__codelineno-12-22"></a>
<a id="__codelineno-12-23" name="__codelineno-12-23"></a><span class="p">#</span><span class="nn">STUDENT</span><span class="w"> </span><span class="nt">tr</span><span class="p">.</span><span class="nc">alt</span><span class="w"> </span><span class="nt">td</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-12-24" name="__codelineno-12-24"></a><span class="w">  </span><span class="k">color</span><span class="p">:</span><span class="w"> </span><span class="mh">#000000</span><span class="p">;</span>
<a id="__codelineno-12-25" name="__codelineno-12-25"></a><span class="w">  </span><span class="k">background-color</span><span class="p">:</span><span class="w"> </span><span class="nb">rgb</span><span class="p">(</span><span class="mi">222</span><span class="p">,</span><span class="mi">226</span><span class="p">,</span><span class="mi">230</span><span class="p">);</span>
<a id="__codelineno-12-26" name="__codelineno-12-26"></a><span class="p">}</span>
</code></pre></div></td></tr></table></div>
<h3 id="_8">拓展练习</h3>
<ol>
<li>使用CSS美化课程表的表单和表格界面</li>
</ol>












                
              </article>
            </div>
          
          
  <script>var tabs=__md_get("__tabs");if(Array.isArray(tabs))e:for(var set of document.querySelectorAll(".tabbed-set")){var labels=set.querySelector(".tabbed-labels");for(var tab of tabs)for(var label of labels.getElementsByTagName("label"))if(label.innerText.trim()===tab){var input=document.getElementById(label.htmlFor);input.checked=!0;continue e}}</script>

<script>var target=document.getElementById(location.hash.slice(1));target&&target.name&&(target.checked=target.name.startsWith("__tabbed_"))</script>
        </div>
        
      </main>
      
        <footer class="md-footer">
  
  <div class="md-footer-meta md-typeset">
    <div class="md-footer-meta__inner md-grid">
      <div class="md-copyright">
  
  
    Made with
    <a href="https://squidfunk.github.io/mkdocs-material/" target="_blank" rel="noopener">
      Material for MkDocs
    </a>
  
</div>
      
    </div>
  </div>
</footer>
      
    </div>
    <div class="md-dialog" data-md-component="dialog">
      <div class="md-dialog__inner md-typeset"></div>
    </div>
    
    
    <script id="__config" type="application/json">{"base": "..", "features": ["content.code.copy", "content.tabs.link", "navigation.expand", "navigation.sections", "navigation.path"], "search": "../assets/javascripts/workers/search.f8cc74c7.min.js", "translations": {"clipboard.copied": "Copied to clipboard", "clipboard.copy": "Copy to clipboard", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.placeholder": "Type to start searching", "search.result.term.missing": "Missing", "select.version": "Select version"}}</script>
    
    
      <script src="../assets/javascripts/bundle.f1b6f286.min.js"></script>
      
    
  </body>
</html>